@symbo.ls/timepicker 2.11.55 → 2.11.70

package/TimePickerItem.js

@@ -1,24 +1,12 @@
 'use strict'
 
 import { Flex } from '@symbo.ls/atoms'
-import { Input } from '@symbo.ls/input'
-import { Button } from '@symbo.ls/button'
 
 const props = {
   align: 'center center',
   flow: 'column',
   gap: 'X',
   style: {
-    'input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    'input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    'input[type=number]': { '-webkit-appearance': 'textfield' },
-    'input:focus < button': { border: '3px solid red' },
     '> button': {
       padding: '0',
       background: 'transparent',
@@ -26,16 +14,6 @@ const props = {
       fontSize: `${12 / 16}em`,
       display: 'none'
     }
-  },
-
-  input: {
-    boxSize: 'C C',
-    round: 'Z',
-    padding: '0',
-    align: 'center center',
-    textAlign: 'center',
-    color: 'white',
-    background: 'white .15'
   }
 }
 
@@ -43,7 +21,27 @@ export const TimePickerItem = {
   tag: 'label',
   extend: Flex,
   props,
-  upButton: { extend: Button, props: { icon: 'plus' } },
-  input: { extend: [Input, Flex], attr: { type: 'number', min: '1', max: '24', value: '1' } },
-  downButton: { extend: Button, props: { icon: 'minus' } }
+  Button_plus: { icon: 'plus' },
+  NumberInput: {
+    boxSize: 'C C',
+    round: 'Z',
+    padding: '0',
+    align: 'center center',
+    textAlign: 'center',
+    min: 0,
+    max: 24,
+    placeholder: '00',
+    appearance: 'textfield',
+    theme: 'secondary',
+
+    '::-webkit-inner-spin-button': {
+      style: { appearance: 'none' },
+      margin: 0
+    },
+    '::-webkit-outer-spin-button': {
+      style: { appearance: 'none' },
+      margin: 0
+    }
+  },
+  Button_minus: { icon: 'minus' }
 }

package/TimeSwitcher.js

@@ -0,0 +1,42 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { Button } from '@symbo.ls/button'
+
+const props = {
+  boxSize: 'C B2',
+  flow: 'column',
+  overflow: 'hidden',
+  round: 'Z',
+  theme: 'secondary'
+}
+
+export const TimeSwitcher = {
+  props,
+  extend: Flex,
+
+  childExtend: {
+    extend: Button,
+    props: ({ state, key }) => ({
+      active: state.activeShift === key,
+      padding: '0',
+      flex: '1',
+      width: '100%',
+      fontSize: 'Y',
+      textTransform: 'uppercase',
+      round: '0',
+      background: 'transparent',
+      color: 'currentColor',
+      lineHeight: '1',
+      '.active': { theme: 'primary' }
+    }),
+    on: {
+      click: (event, element, state) => {
+        state.update({ activeShift: element.key })
+      }
+    }
+  },
+
+  am: { text: 'am' },
+  pm: { text: 'pm' }
+}

package/index.js

@@ -2,34 +2,70 @@
 
 import { Flex } from '@symbo.ls/atoms'
 import { Dialog } from '@symbo.ls/dialog'
-import { TimePickerItem } from './TimePickerItem'
 
-const props = {
-  flow: 'column',
-  width: 'fit-content',
-  background: 'rgba(255, 255, 255, .15)',
-  padding: 'A A B A',
-  round: 'Z',
+export const TimePicker = {
+  extend: [Dialog, Flex],
+
+  state: {
+    activeShift: 'am'
+  },
+
+  props: {
+    flow: 'column',
+    width: 'fit-content',
+    padding: 'Z A'
+  },
 
-  title: {
+  Title: {
     fontSize: 'Z1',
     textTransform: 'capitalize',
-    padding: '- - B -'
+    padding: '- - A -',
+    text: 'enter time'
   },
 
-  content: {
-    align: 'center center',
-    gap: 'A',
-    timePickers: {
+  Flex: {
+    props: {
       align: 'center center',
-      gap: 'Y2'
-    }
+      gap: 'A'
+    },
+
+    Flex: {
+      tag: 'label',
+      props: {
+        align: 'center center',
+        gap: 'Y2'
+      },
+      TimePickerItem_hh: {
+        NumberInput: {
+          placeholder: 'HH',
+          min: '0',
+          max: '11'
+        }
+      },
+      Span: ':',
+      TimePickerItem_mm: {
+        NumberInput: {
+          placeholder: 'MM',
+          min: '0',
+          max: '59'
+        }
+      },
+      Span_2: ':',
+      TimePickerItem_ss: {
+        NumberInput: {
+          placeholder: 'SS',
+          min: '0',
+          max: '59'
+        }
+      }
+    },
+    TimeSwitcher: {}
   },
 
-  footButtons: {
+  DialogFooter: {
     align: 'center flex-end',
-    gap: 'A1',
-    padding: 'B1 - - -',
+    gap: 'X',
+    margin: 'Z2 -Z2 -Z',
     childProps: {
       background: 'transparent',
       padding: '0',
@@ -38,25 +74,5 @@ const props = {
   }
 }
 
-export const TimePicker = {
-  extend: [Dialog, Flex],
-  props,
-  title: { text: 'enter time' },
-  content: {
-    extend: Flex,
-    timePickers: {
-      tag: 'label',
-      extend: Flex,
-      ...[
-        { extend: TimePickerItem },
-        ':',
-        { extend: TimePickerItem },
-        ':',
-        { extend: TimePickerItem }
-      ]
-    },
-    TimeSwitcher: {}
-  },
-
-  DialogFooter: {}
-}
+export * from './TimePickerItem'
+export * from './TimeSwitcher'

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/timepicker",
-  "version": "2.11.55",
+  "version": "2.11.70",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "f4a6af272593be22cbf1337ddb25afec00ba359d",
+  "gitHead": "329c180a4cf02896ec76566a5b2f5368f62a6b06",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest",

package/TimeSwithcher.js

@@ -1,63 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/atoms'
-import { Button } from '@symbo.ls/button'
-
-const props = {
-  boxSize: `C ${34 / 16}em`,
-  flow: 'column',
-  overflow: 'hidden',
-  round: 'Z',
-  background: 'rgba(255, 255, 255, .15)',
-  childProps: {
-    padding: '0',
-    background: 'transparent',
-    color: 'white',
-    flex: '1',
-    width: '100%',
-    fontSize: 'Y',
-    textTransform: 'capitalize',
-    round: '0'
-  }
-}
-
-export const TimeSwitcher = {
-  props,
-  extend: Flex,
-
-  childExtend: Button,
-  ...[
-    {
-      text: 'am',
-      on: {
-        click: (event, element, state) => {
-          state.update({ activeTime: true })
-        }
-      },
-      class: {
-        show: (element, state) => state.activeTime
-          ? {
-              background: '#0079FD',
-              pointerEvents: 'none'
-            }
-          : {}
-      }
-    },
-    {
-      text: 'pm',
-      on: {
-        click: (event, element, state) => {
-          state.update({ activeTime: false })
-        }
-      },
-      class: {
-        show: (element, state) => state.activeTime === false
-          ? {
-              background: '#0079FD',
-              pointerEvents: 'none'
-            }
-          : {}
-      }
-    }
-  ]
-}