@auronui/styles 1.3.0 → 1.4.0

package/components/index.css

@@ -118,6 +118,7 @@
 @import "./date-input.css";
 @import "./date-range-field.css";
 @import "./time-field.css";
+@import "./time-picker.css";
 @import "./time-range-field.css";
 @import "./date-picker.css";
 @import "./date-range-picker.css";

package/components/time-picker.css

@@ -0,0 +1,95 @@
+/* ==========================================================================
+   TimePicker — TimeField trigger + wheel-scroller popover
+   ========================================================================== */
+
+.time-picker {
+  @apply inline-flex flex-col gap-1;
+}
+
+.time-picker--full-width {
+  @apply w-full;
+}
+
+.time-picker--invalid {
+  /* invalid state propagated to child TimeField via isInvalid prop */
+}
+
+.time-picker--disabled {
+  @apply opacity-60 cursor-not-allowed pointer-events-none;
+}
+
+/* ─── Trigger (clock icon button) ─────────────────────────────────────── */
+
+.time-picker__trigger {
+  @apply inline-flex items-center justify-center rounded-field p-1 no-highlight bg-transparent border-0 cursor-pointer outline-none shrink-0;
+  color: var(--color-field-placeholder);
+  cursor: var(--cursor-interactive);
+
+  transition: box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.time-picker__trigger-indicator {
+  @apply inline-flex size-4 items-center justify-center text-field-placeholder;
+}
+
+/* ─── Popover shell ───────────────────────────────────────────────────────── */
+
+.time-picker__popover {
+  z-index: var(--z-popover);
+  @apply origin-(--trigger-anchor-point) overflow-hidden bg-overlay p-0;
+  min-width: 8rem;
+  box-shadow: var(--shadow-overlay);
+  border-radius: calc(var(--radius) * 2.5);
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  & {
+    @apply animate-in duration-300 ease-smooth fade-in-0 zoom-in-95;
+
+    &[data-placement^="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement^="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement^="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement^="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  &,
+  & {
+    @apply will-change-[opacity,transform];
+  }
+}
+
+/* ─── Panel (wheels stacked above the Done button) ───────────────────────── */
+
+.time-picker__panel {
+  @apply flex flex-col;
+}
+
+.time-picker__time-done {
+  @apply flex justify-end px-3 pb-3 pt-1;
+}

package/dist/components/index.d.ts

@@ -78,6 +78,7 @@ export * from './tabs';
 export * from './text';
 export * from './textarea';
 export * from './time-field';
+export * from './time-picker';
 export * from './time-range-field';
 export * from './toast';
 export * from './toggle-button';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC"}

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './time-picker.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/time-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/time-picker/index.js

@@ -0,0 +1,2 @@
+import { timePickerVariants } from "./time-picker.styles.js";
+export { timePickerVariants };

package/dist/components/time-picker/time-picker.styles.d.ts

@@ -0,0 +1,82 @@
+import { VariantProps } from '../../utils';
+export declare const timePickerVariants: import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    popover: string;
+    trigger: string;
+    triggerIndicator: string;
+    panel: string;
+    timeDone: string;
+}, undefined, {
+    isInvalid: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    popover: string;
+    trigger: string;
+    triggerIndicator: string;
+    panel: string;
+    timeDone: string;
+}, import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    popover: string;
+    trigger: string;
+    triggerIndicator: string;
+    panel: string;
+    timeDone: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TimePickerVariants = VariantProps<typeof timePickerVariants>;
+//# sourceMappingURL=time-picker.styles.d.ts.map

package/dist/components/time-picker/time-picker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAI9C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4B7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/time-picker/time-picker.styles.js

@@ -0,0 +1,35 @@
+import { tv } from "tailwind-variants";
+//#region src/components/time-picker/time-picker.styles.ts
+var timePickerVariants = tv({
+	slots: {
+		base: "time-picker",
+		popover: "time-picker__popover",
+		trigger: "time-picker__trigger",
+		triggerIndicator: "time-picker__trigger-indicator",
+		panel: "time-picker__panel",
+		timeDone: "time-picker__time-done"
+	},
+	defaultVariants: {
+		isInvalid: false,
+		isDisabled: false,
+		fullWidth: false
+	},
+	variants: {
+		isInvalid: {
+			true: { base: "time-picker--invalid" },
+			false: {}
+		},
+		isDisabled: {
+			true: { base: "time-picker--disabled" },
+			false: {}
+		},
+		fullWidth: {
+			true: { base: "time-picker--full-width" },
+			false: {}
+		}
+	}
+});
+//#endregion
+export { timePickerVariants };
+
+//# sourceMappingURL=time-picker.styles.js.map

package/dist/components/time-picker/time-picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.styles.js","names":[],"sources":["../../../src/components/time-picker/time-picker.styles.ts"],"sourcesContent":["import type {VariantProps} from \"../../utils\";\n\nimport {tv} from \"tailwind-variants\";\n\nexport const timePickerVariants = tv({\n  slots: {\n    base: \"time-picker\",\n    popover: \"time-picker__popover\",\n    trigger: \"time-picker__trigger\",\n    triggerIndicator: \"time-picker__trigger-indicator\",\n    panel: \"time-picker__panel\",\n    timeDone: \"time-picker__time-done\",\n  },\n  defaultVariants: {\n    isInvalid: false,\n    isDisabled: false,\n    fullWidth: false,\n  },\n  variants: {\n    isInvalid: {\n      true: {base: \"time-picker--invalid\"},\n      false: {},\n    },\n    isDisabled: {\n      true: {base: \"time-picker--disabled\"},\n      false: {},\n    },\n    fullWidth: {\n      true: {base: \"time-picker--full-width\"},\n      false: {},\n    },\n  },\n});\n\nexport type TimePickerVariants = VariantProps<typeof timePickerVariants>;\n"],"mappings":";;AAIA,IAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,MAAM;EACN,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,OAAO;EACP,UAAU;EACX;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;EACZ,WAAW;EACZ;CACD,UAAU;EACR,WAAW;GACT,MAAM,EAAC,MAAM,wBAAuB;GACpC,OAAO,EAAE;GACV;EACD,YAAY;GACV,MAAM,EAAC,MAAM,yBAAwB;GACrC,OAAO,EAAE;GACV;EACD,WAAW;GACT,MAAM,EAAC,MAAM,2BAA0B;GACvC,OAAO,EAAE;GACV;EACF;CACF,CAAC"}

package/dist/index.js

@@ -79,6 +79,7 @@ import { tabsVariants } from "./components/tabs/tabs.styles.js";
 import { textVariants } from "./components/text/text.styles.js";
 import { textAreaVariants } from "./components/textarea/textarea.styles.js";
 import { timeFieldVariants } from "./components/time-field/time-field.styles.js";
+import { timePickerVariants } from "./components/time-picker/time-picker.styles.js";
 import { timeRangeFieldVariants } from "./components/time-range-field/time-range-field.styles.js";
 import { toastVariants } from "./components/toast/toast.styles.js";
 import { toggleButtonVariants } from "./components/toggle-button/toggle-button.styles.js";
@@ -89,4 +90,4 @@ import { aspectRatioVariants } from "./components/aspect-ratio/aspect-ratio.styl
 import { splitterVariants } from "./components/splitter/splitter.styles.js";
 import { stepperVariants } from "./components/stepper/stepper.styles.js";
 import { treeVariants } from "./components/tree/tree.styles.js";
-export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, aspectRatioVariants, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, collapsibleGroupVariants, collapsibleVariants, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, contextMenuVariants, dateInputVariants, datePickerVariants, dateRangeFieldVariants, dateRangePickerVariants, dateTimePickerVariants, descriptionVariants, disabledClasses, drawerVariants, dropdownVariants, editableVariants, emptyStateVariants, errorMessageVariants, fieldsetVariants, focusRingClasses, headerVariants, hoverCardVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, menubarVariants, meterVariants, modalVariants, monthRangePickerVariants, navigationMenuVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, selectVariants, separatorVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, stepperVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, textAreaVariants, textVariants, timeFieldVariants, timeRangeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, treeVariants, yearRangePickerVariants };
+export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, aspectRatioVariants, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, collapsibleGroupVariants, collapsibleVariants, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, contextMenuVariants, dateInputVariants, datePickerVariants, dateRangeFieldVariants, dateRangePickerVariants, dateTimePickerVariants, descriptionVariants, disabledClasses, drawerVariants, dropdownVariants, editableVariants, emptyStateVariants, errorMessageVariants, fieldsetVariants, focusRingClasses, headerVariants, hoverCardVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, menubarVariants, meterVariants, modalVariants, monthRangePickerVariants, navigationMenuVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, selectVariants, separatorVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, stepperVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, textAreaVariants, textVariants, timeFieldVariants, timePickerVariants, timeRangeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, treeVariants, yearRangePickerVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",

package/src/components/index.ts

@@ -79,6 +79,7 @@ export * from "./tabs";
 export * from "./text";
 export * from "./textarea";
 export * from "./time-field";
+export * from "./time-picker";
 export * from "./time-range-field";
 export * from "./toast";
 export * from "./toggle-button";

package/src/components/time-picker/index.ts

@@ -0,0 +1 @@
+export * from "./time-picker.styles";

package/src/components/time-picker/time-picker.styles.ts

@@ -0,0 +1,35 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const timePickerVariants = tv({
+  slots: {
+    base: "time-picker",
+    popover: "time-picker__popover",
+    trigger: "time-picker__trigger",
+    triggerIndicator: "time-picker__trigger-indicator",
+    panel: "time-picker__panel",
+    timeDone: "time-picker__time-done",
+  },
+  defaultVariants: {
+    isInvalid: false,
+    isDisabled: false,
+    fullWidth: false,
+  },
+  variants: {
+    isInvalid: {
+      true: {base: "time-picker--invalid"},
+      false: {},
+    },
+    isDisabled: {
+      true: {base: "time-picker--disabled"},
+      false: {},
+    },
+    fullWidth: {
+      true: {base: "time-picker--full-width"},
+      false: {},
+    },
+  },
+});
+
+export type TimePickerVariants = VariantProps<typeof timePickerVariants>;