@multiplatform.one/components 6.7.0 → 7.1.0

package/src/Wheel/Wheel.stories.tsx

@@ -19,6 +19,7 @@ const meta: Meta<typeof Wheel> = {
     itemHeight: { control: "number" },
     disabled: { control: "boolean" },
     loop: { control: "boolean" },
+    highlightEdges: { control: "select", options: ["all", "start", "end", "none"] },
   },
 };
 
@@ -64,11 +65,10 @@ export const TimePicker: Story = {
             {pad(hour)}:{pad(minute)}:{pad(second)}
           </Text>
           <XStack
-            gap="$2"
             alignItems="center"
-            backgroundColor="$background"
+            backgroundColor="$color2"
             borderRadius="$4"
-            padding="$2"
+            paddingVertical="$2"
           >
             <Wheel
               items={hours24.map((h) => ({ value: h, label: pad(h) }))}
@@ -76,8 +76,10 @@ export const TimePicker: Story = {
               onChange={setHour}
               visibleItems={5}
               itemHeight={36}
+              width={72}
+              highlightEdges="start"
             />
-            <Text fontSize="$6" fontWeight="bold" color="$color11">
+            <Text fontSize="$8" fontWeight="600" color="$color11" px="$1">
               :
             </Text>
             <Wheel
@@ -86,8 +88,10 @@ export const TimePicker: Story = {
               onChange={setMinute}
               visibleItems={5}
               itemHeight={36}
+              width={72}
+              highlightEdges="none"
             />
-            <Text fontSize="$6" fontWeight="bold" color="$color11">
+            <Text fontSize="$8" fontWeight="600" color="$color11" px="$1">
               :
             </Text>
             <Wheel
@@ -96,6 +100,8 @@ export const TimePicker: Story = {
               onChange={setSecond}
               visibleItems={5}
               itemHeight={36}
+              width={72}
+              highlightEdges="end"
             />
           </XStack>
         </YStack>
@@ -117,11 +123,10 @@ export const Hour12Picker: Story = {
             {hour}:00 {ampm}
           </Text>
           <XStack
-            gap="$3"
             alignItems="center"
-            backgroundColor="$background"
+            backgroundColor="$color2"
             borderRadius="$4"
-            padding="$2"
+            paddingVertical="$2"
           >
             <Wheel
               items={hours12}
@@ -129,6 +134,8 @@ export const Hour12Picker: Story = {
               onChange={setHour}
               visibleItems={5}
               itemHeight={40}
+              width={80}
+              highlightEdges="start"
             />
             <Wheel
               items={["AM", "PM"] as const}
@@ -136,6 +143,8 @@ export const Hour12Picker: Story = {
               onChange={setAmpm as (v: string) => void}
               visibleItems={3}
               itemHeight={40}
+              width={80}
+              highlightEdges="end"
             />
           </XStack>
         </YStack>
@@ -258,11 +267,10 @@ export const DatePicker: Story = {
             {months[month - 1]} {day}, {year}
           </Text>
           <XStack
-            gap="$2"
             alignItems="center"
-            backgroundColor="$background"
+            backgroundColor="$color2"
             borderRadius="$4"
-            padding="$2"
+            paddingVertical="$2"
           >
             <Wheel
               items={months.map((m, i) => ({ value: i + 1, label: m }))}
@@ -270,9 +278,27 @@ export const DatePicker: Story = {
               onChange={setMonth}
               visibleItems={5}
               itemHeight={36}
+              width={108}
+              highlightEdges="start"
+            />
+            <Wheel
+              items={days}
+              value={day}
+              onChange={setDay}
+              visibleItems={5}
+              itemHeight={36}
+              width={64}
+              highlightEdges="none"
+            />
+            <Wheel
+              items={years}
+              value={year}
+              onChange={setYear}
+              visibleItems={5}
+              itemHeight={36}
+              width={88}
+              highlightEdges="end"
             />
-            <Wheel items={days} value={day} onChange={setDay} visibleItems={5} itemHeight={36} />
-            <Wheel items={years} value={year} onChange={setYear} visibleItems={5} itemHeight={36} />
           </XStack>
         </YStack>
       );