build version 400

resources/assets/js/components/theme/SwBadge.js

@@ -0,0 +1,17 @@
+export default {
+  classes:
+    'px-2 py-1 text-xs bg-success text-green-800 uppercase font-normal text-center',
+  variants: {
+    success:
+      'px-2 py-1 text-xs bg-success text-green-800 uppercase font-normal text-center',
+
+    info:
+      'px-2 py-1 text-xs bg-info text-blue-800 uppercase text-center font-normal',
+
+    danger:
+      'px-2 py-1 text-xs bg-danger text-red-700 uppercase font-normal text-center',
+
+    warning:
+      'px-2 py-1 text-xs bg-warning text-indigo-900 uppercase font-normal text-center',
+  },
+}

resources/assets/js/components/theme/SwButton.js

@@ -0,0 +1,16 @@
+export default {
+  variants: {
+    grayLight: {
+      button:
+        'inline-flex items-center justify-center text-gray-400 transition duration-150 ease-in-out border border-transparent focus:outline-none bg-gray-100 border border-gray-200 hover:bg-gray-200 hover:border-gray-400 hover:text-gray-600',
+    },
+    gray: {
+      button:
+        'inline-flex items-center justify-center text-gray-400 transition duration-150 ease-in-out border border-transparent focus:outline-none bg-gray-300 border border-gray-200',
+    },
+    white: {
+      button:
+        'inline-flex items-center justify-center text-black transition px-2 duration-150 ease-in-out border border-gray-300 border-solid focus:outline-none bg-white',
+    },
+  },
+}

resources/assets/js/components/theme/SwCard.js

@@ -0,0 +1,18 @@
+export default {
+  classes: {
+    container: 'bg-white rounded shadow',
+    header: 'px-5 py-4 text-black border-b border-solid border-gray-300',
+    body: 'px-4 py-5 sm:p-8',
+    footer: 'px-5 py-4 border-t border-solid sm:px-6 border-gray-300',
+  },
+
+  variants: {
+    customerCard: {
+      body: 'px-4 py-5 sm:p-8',
+    },
+    settingCard: {
+      header: 'px-4 pt-5 sm:px-8 sm:pt-8',
+      footer: 'px-5 border-t-none py-4 sm:px-6',
+    },
+  },
+}

resources/assets/js/components/theme/SwDropdown.js

@@ -0,0 +1,25 @@
+export default {
+  classes: {
+    container: 'relative sw-dropdown',
+    activator: 'cursor-pointer',
+    divider: 'border-t border-solid border-gray-200 my-2 mx-0 overflow-hidden',
+    itemContainer:
+      'z-10 p-2 max-h-60 text-base text-left list-none rounded border-0 shadow bg-white text-black overflow-auto sw-scroll',
+    item:
+      'flex p-2 text-sm font-light text-left text-black bg-transparent rounded cursor-pointer none hover:bg-gray-200 whitespace-no-wrap',
+    itemIcon: 'w-5 h-5 mr-3 text-secondary',
+  },
+  variants: {
+    searchDropdown: {
+      activator: 'cursor-pointer',
+      container: 'relative',
+      divider:
+        'border-t border-solid border-gray-200 my-2 mx-0 overflow-hidden',
+      item:
+        'flex p-0 text-sm font-light text-left text-black bg-transparent rounded cursor-pointer none hover:bg-gray-200 whitespace-no-wrap',
+      itemContainer:
+        'z-10 p-2 text-base text-left list-none rounded border-0 shadow bg-white text-black',
+      itemIcon: 'w-5 h-5 mr-3 text-secondary',
+    },
+  },
+}

resources/assets/js/components/theme/SwFilterWrapper.js

@@ -0,0 +1,7 @@
+export default {
+  classes: {
+    container: 'relative p-8 mt-5 rounded bg-gray-200',
+    body: 'lg:flex block flex-col md:flex-row',
+  },
+  variants: {},
+}

resources/assets/js/components/theme/SwInput.js

@@ -0,0 +1,31 @@
+export default {
+  variants: {
+    gray: {
+      container:
+        'relative flex items-center w-full border border-solid rounded-md bg-gray-100 hover:border-gray-400',
+      baseInput:
+        'not-italic font-normal leading-tight text-left outline-none rounded-md input-field box-border-2 placeholder-gray-400 text-black w-full h-8 px-0 py-0 text-xs bg-gray-100',
+      rightIconInput:
+        'not-italic font-normal leading-tight text-left outline-none min-w-0 rounded-md input-field box-border-2 placeholder-gray-400 text-black w-full pl-3 pr-1 py-2 text-sm bg-gray-100',
+      rightIconContainer:
+        'flex flex-col justify-center align-middle pr-2 text-gray-400 min-w-0',
+      containerFocusIn: 'border-primary-500 ',
+      containerFocusOut: 'border-gray-300 focus:border-transparent',
+    },
+
+    searchInput: {
+      container:
+        'relative flex items-center w-full border border-solid rounded-md bg-white',
+      baseInput:
+        'not-italic font-normal leading-tight text-left outline-none rounded-md input-field box-border-2 placeholder-gray-400 text-black w-full h-8 px-0 py-0 text-xs',
+      rightIconInput:
+        'not-italic font-normal leading-tight text-left outline-none rounded-md input-field box-border-2 placeholder-gray-400 text-black w-full pl-3 pr-1 py-2 text-sm',
+      leftIconInput:
+        'not-italic font-normal leading-tight text-left outline-none rounded-md input-field box-border-2 placeholder-gray-400 text-black w-full pl-1 pr-3 py-2 text-sm',
+      rightIconContainer: 'flex flex-col justify-center align-middle pr-2',
+      leftIconContainer: 'flex flex-col justify-center align-middle',
+      containerFocusIn: 'border-primary-500',
+      containerFocusOut: 'border-gray-300 focus:border-transparent',
+    },
+  },
+}

resources/assets/js/components/theme/SwList.js

@@ -0,0 +1,33 @@
+export default {
+  classes: {
+    container: 'pr-4 pl-0 list-none',
+    itemContainer:
+      'cursor-pointer pb-2 pr-0 text-sm font-medium leading-5 text-gray-500 flex items-center',
+    title: '',
+    iconContainer: 'mr-3',
+    listGroup: {
+      container: 'p-0 list-none',
+      titleContainer:
+        'flex items-center justify-between pb-2 pr-0 text-sm font-medium leading-5 text-gray-500 cursor-pointer',
+      title: 'text-sm',
+      icon: 'w-5 h-5 leading-4 transform rotate-90',
+      itemsContainer: 'pl-4 list-none',
+      itemContainer:
+        'cursor-pointer pb-2 pr-0 text-sm font-medium leading-5 text-gray-500 flex items-center',
+    },
+    active: {
+      itemContainer:
+        'cursor-pointer pb-2 pr-0 text-sm font-medium flex items-center leading-5 text-primary-500',
+      listGroup: {
+        container: 'p-0 list-none',
+        titleContainer:
+          'flex items-center justify-between pb-2 pr-0 text-sm font-medium leading-5 text-primary-500 cursor-pointer',
+        title: 'text-sm',
+        icon: 'w-5 h-5 leading-4 ',
+        itemsContainer: 'pl-4 list-none',
+        itemContainer:
+          'cursor-pointer pb-2 pr-0 text-sm font-medium leading-5 text-gray-500 flex items-center',
+      },
+    },
+  },
+}

resources/assets/js/components/theme/SwModal.js

@@ -0,0 +1,20 @@
+export default {
+  classes: {
+    overlayContainer:
+      'fixed z-50 inset-0 overflow-y-auto sw-scroll bg-opacity-25 bg-gray-700 flex justify-center min-h-screen items-center text-center sm:p-0',
+    centering: 'hidden sm:inline-block sm:align-middle sm:h-screen',
+    base:
+      'inline-block border-t-8 border-solid border-primary-500 w-full align-bottom bg-white rounded text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-xl sm:w-full m-6 sm:m-0',
+    header:
+      'py-4 px-6 h-16 text-black font-medium text-lg border-b border-solid border-gray-light flex justify-between items-center',
+    body: 'modal body text-sm',
+    footer:
+      'border-t border-solid border-gray-light py-4 px-6 flex justify-end',
+  },
+  variants: {
+    lg: {
+      base:
+        'inline-block border-t-8 border-solid border-primary-500 w-full align-bottom bg-white rounded text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full m-6 sm:m-0',
+    },
+  },
+}

resources/assets/js/components/theme/SwPopup.js

@@ -0,0 +1,8 @@
+export default {
+  classes: {
+    container: 'relative w-full',
+    activator: 'relative w-full cursor-pointer',
+    base: 'flex flex-col absolute w-full top-0 bg-white rounded z-20 shadow-xl',
+    above: 'bottom-full top-unset',
+  },
+}

resources/assets/js/components/theme/SwRadio.js

@@ -0,0 +1,34 @@
+export default {
+  classes: {
+    container: 'radio',
+    label: 'cursor-pointer',
+    input:
+      'cursor-pointer flex-shrink-0 inline-block text-primary-500 align-middle bg-white border border-gray-300 rounded-full outline-none appearance-none select-none transition duration-200 ease-in-out',
+  },
+  variants: {
+    success: {
+      input:
+        'cursor-pointer flex-shrink-0 inline-block text-success align-middle bg-white border border-gray-300 rounded-full outline-none appearance-none select-none transition duration-200 ease-in-out',
+      label: 'cursor-pointer',
+    },
+    danger: {
+      input:
+        'cursor-pointer flex-shrink-0 inline-block text-danger align-middle bg-white border border-gray-300 rounded-full outline-none appearance-none select-none transition duration-200 ease-in-out',
+      label: 'cursor-pointer',
+    },
+  },
+  sizes: {
+    sm: {
+      input: 'w-4 h-4',
+      label: 'ml-2',
+    },
+    default: {
+      input: 'w-6 h-6',
+      label: 'ml-3 text-lg',
+    },
+    lg: {
+      input: 'w-8 h-8',
+      label: 'ml-4 text-xl',
+    },
+  },
+}

resources/assets/js/components/theme/SwSwitch.js

@@ -0,0 +1,8 @@
+export default {
+  classes: {
+    container: 'switch-container focus:outline-none',
+    switch: 'switch',
+    label:
+      'relative block h-4 bg-white border border-solid cursor-pointer border-gray switch-label',
+  },
+}

resources/assets/js/components/theme/SwTable.js

@@ -0,0 +1,8 @@
+export default {
+  variants: {
+    gray: {
+      tdStyles:
+        'text-left text-base h-20 px-3 py-6 align-middle bg-gray-100 first:rounded-bl-md first:rounded-tl-md last:rounded-br-md last:rounded-tr-md',
+    },
+  },
+}

resources/assets/js/components/theme/SwTextarea.js

@@ -0,0 +1,6 @@
+export default {
+  variants: {
+    invDesc:
+      'text-left border border-solid box-border rounded not-italic leading-snug placeholder-gray-400 bg-white border-gray-300 focus:border-primary-400 outline-none w-full py-2 px-3 font-normal text-xs text-black',
+  },
+}

resources/assets/js/components/theme/SwWizard.js

@@ -0,0 +1,25 @@
+export default {
+  classes: {
+    wizardContainer: 'wizard w-full',
+    wizardStepsContainer: 'relative flex items-center justify-center',
+    navigationContainer:
+      'flex flex-col items-center justify-between h-32 step-indicator',
+    progressesContainer:
+      'box-border relative flex justify-around mt-16 border-4 border-gray-200 border-solid rounded-md indicator-line',
+    progressesSubContainer: 'absolute flex justify-between center',
+    progress: 'rounded-full steps cursor-pointer',
+    currentStep: 'bg-white border-primary-500',
+    previousStep:
+      'bg-primary-500 border-primary-500 flex justify-center items-center',
+    nextStep: 'border-gray-200 bg-white',
+    icon:
+      'flex items-center justify-center w-full h-full text-sm font-black text-center text-white',
+    stepContainer:
+      'w-full mb-8 bg-white border border-gray-200 border-solid rounded p-8 lg:w-9/12 md:w-full relative',
+    stepHeadingContainer: 'heading-section',
+    stepTitle: 'text-2xl not-italic font-semibold leading-7 text-black',
+    stepDescription:
+      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 lg:w-7/12 md:w-7/12 sm:w-7/12',
+  },
+  variants: {},
+}

resources/assets/js/components/theme/index.js

@@ -0,0 +1,29 @@
+import SwModal from './SwModal'
+import SwInput from './SwInput'
+import SwTable from './SwTable'
+import SwButton from './SwButton'
+import SwDropdown from './SwDropdown'
+import SwCard from './SwCard'
+import SwList from './SwList'
+import SwWizard from './SwWizard'
+import SwTextarea from './SwTextarea'
+import SwPopup from './SwPopup'
+import SwBadge from './SwBadge'
+import SwFilterWrapper from './SwFilterWrapper'
+import SwSwitch from './SwSwitch'
+
+export default {
+  SwModal,
+  SwInput,
+  SwTable,
+  SwButton,
+  SwCard,
+  SwList,
+  SwWizard,
+  SwTextarea,
+  SwPopup,
+  SwDropdown,
+  SwBadge,
+  SwFilterWrapper,
+  SwSwitch,
+}