@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createVNode","RuiButton","_withCtx","RuiIcon","_createCommentVNode","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabIndicator } from '@/components/tabs/tabs/use-tab-indicator';\nimport { useTabKeyboard } from '@/components/tabs/tabs/use-tab-keyboard';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n/**\n * The selected tab, defaulting to the first one. The default also narrows the\n * `update:modelValue` payload to `number | string`, so a consumer's handler\n * needs no undefined in its signature.\n */\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n  variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst barTabindex = useKeyboardScroll(bar);\n\n/**\n * The bar. The underline variant draws its 1px track as a `before` line along\n * the whole root, so the arrows sit on it too, and the 2px indicator, a layer\n * above, covers it under the active tab.\n */\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: 'flex shrink-0 items-center justify-center',\n    // a tab stop only when it scrolls with every tab disabled (useKeyboardScroll)\n    bar: 'no-scrollbar relative max-h-full overflow-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    wrapper: 'inline-flex max-w-none',\n    indicator: 'pointer-events-none absolute',\n  },\n  variants: {\n    variant: {\n      [TabVariant.underline]: {\n        root: `relative before:pointer-events-none before:absolute before:bg-rui-divider before:content-['']`,\n        indicator: 'z-1 bg-rui-primary',\n      },\n      [TabVariant.segmented]: {\n        // neutral-200, not 100: on a near-white page (`#fafafa`) the lighter track all but disappeared\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 dark:bg-rui-neutral-800',\n        wrapper: 'gap-0.5',\n        indicator: 'rounded-rui-control bg-rui-surface shadow-rui-control dark:bg-rui-neutral-700',\n      },\n    },\n    layout: {\n      [TabLayout.horizontal]: { root: 'flex h-fit', arrow: 'w-8' },\n      [TabLayout.vertical]: { root: 'inline-flex flex-col', arrow: 'h-8 w-full', wrapper: 'flex-col w-full' },\n    },\n    indicatorPosition: {\n      start: {},\n      end: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    wide: {\n      true: { bar: 'w-full', wrapper: 'min-w-full' },\n      false: {},\n    },\n    animated: {\n      true: { indicator: 'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end', class: { root: 'before:inset-x-0 before:bottom-0 before:h-px', indicator: 'bottom-0 h-0.5 rounded-t-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'start', class: { root: 'before:inset-x-0 before:top-0 before:h-px', indicator: 'top-0 h-0.5 rounded-b-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'end', class: { root: 'before:inset-y-0 before:right-0 before:w-px', indicator: 'right-0 w-0.5 rounded-l-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'start', class: { root: 'before:inset-y-0 before:left-0 before:w-px', indicator: 'left-0 w-0.5 rounded-r-full' } },\n    // the underline track spans its row, while a segmented control hugs its options unless it grows\n    { variant: TabVariant.segmented, layout: TabLayout.horizontal, wide: false, class: { root: 'w-fit max-w-full' } },\n    // `color` picks the underline's color; the segmented pill stays a neutral surface\n    { variant: TabVariant.underline, color: 'secondary', class: { indicator: 'bg-rui-secondary' } },\n    { variant: TabVariant.underline, color: 'error', class: { indicator: 'bg-rui-error' } },\n    { variant: TabVariant.underline, color: 'warning', class: { indicator: 'bg-rui-warning' } },\n    { variant: TabVariant.underline, color: 'info', class: { indicator: 'bg-rui-info' } },\n    { variant: TabVariant.underline, color: 'success', class: { indicator: 'bg-rui-success' } },\n  ],\n  defaultVariants: { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end' },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst { onKeydown } = useTabKeyboard({ wrapper, vertical: () => vertical });\n\nconst { style: indicatorStyle, animated, update: updateIndicator } = useTabIndicator({\n  bar,\n  wrapper,\n  vertical: () => vertical,\n  variant: () => variant,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({\n  variant,\n  layout: get(layout),\n  indicatorPosition,\n  color,\n  wide: vertical || grow,\n  animated: get(animated),\n}));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n    variant,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nwatch(() => [vertical, variant, grow, align], () => nextTick(updateIndicator), { flush: 'post' });\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        variant=\"text\"\n        icon\n        size=\"sm\"\n        tabindex=\"-1\"\n        aria-label=\"Scroll tabs back\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n      :tabindex=\"barTabindex\"\n    >\n      <span\n        v-if=\"indicatorStyle\"\n        aria-hidden=\"true\"\n        data-id=\"tabs-indicator\"\n        :class=\"ui.indicator()\"\n        :style=\"indicatorStyle\"\n      />\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :aria-orientation=\"vertical ? 'vertical' : undefined\"\n        :class=\"ui.wrapper()\"\n        @keydown=\"onKeydown($event)\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        variant=\"text\"\n        icon\n        size=\"sm\"\n        tabindex=\"-1\"\n        aria-label=\"Scroll tabs forward\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createVNode","RuiButton","_withCtx","RuiIcon","_createCommentVNode","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, type HTMLAttributes, isVNode, type Ref, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabIndicator } from '@/components/tabs/tabs/use-tab-indicator';\nimport { useTabKeyboard } from '@/components/tabs/tabs/use-tab-keyboard';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { type ModelValueEmits, usePropModel } from '@/composables/prop-model';\nimport { tabsStyles } from './tabs-styles';\n\n/** Comes first: the component is generic, and only the declarations that open the script are hoisted out of its setup function. */\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n  variant = TabVariant.underline,\n  modelValue: modelValueProp,\n} = defineProps<Props & {\n  /**\n   * The selected tab's value. `T` is the bound value's type, so a `Ref<'a' | 'b'>` takes the update as is.\n   *\n   * @defaultValue 0\n   */\n  modelValue?: T;\n} & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineEmits<ModelValueEmits<T>>();\n\n/*\n * A prop and an event rather than `defineModel`: the `0` default is no `T`, and without a default\n * the update would be typed with an `undefined` it never carries. The component writes through the\n * wider ref.\n */\nconst model: Ref<string | number | undefined> = usePropModel('modelValue', () => modelValueProp);\n\n// the selected tab, the first one while the model is unbound or undefined\nconst modelValue = computed<string | number>({\n  get: () => get(model) ?? 0,\n  set: (value: string | number) => set(model, value),\n});\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst barTabindex = useKeyboardScroll(bar);\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst { onKeydown } = useTabKeyboard({ wrapper, vertical: () => vertical });\n\nconst { style: indicatorStyle, animated, update: updateIndicator } = useTabIndicator({\n  bar,\n  wrapper,\n  vertical: () => vertical,\n  variant: () => variant,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabsStyles>>(() => tabsStyles({\n  variant,\n  layout: get(layout),\n  indicatorPosition,\n  color,\n  wide: vertical || grow,\n  animated: get(animated),\n}));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n    variant,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nwatch(() => [vertical, variant, grow, align], () => nextTick(updateIndicator), { flush: 'post' });\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        variant=\"text\"\n        icon\n        size=\"sm\"\n        tabindex=\"-1\"\n        aria-label=\"Scroll tabs back\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n      :tabindex=\"barTabindex\"\n    >\n      <span\n        v-if=\"indicatorStyle\"\n        aria-hidden=\"true\"\n        data-id=\"tabs-indicator\"\n        :class=\"ui.indicator()\"\n        :style=\"indicatorStyle\"\n      />\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :aria-orientation=\"vertical ? 'vertical' : undefined\"\n        :class=\"ui.wrapper()\"\n        @keydown=\"onKeydown($event)\"\n      >\n        <component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        variant=\"text\"\n        icon\n        size=\"sm\"\n        tabindex=\"-1\"\n        aria-label=\"Scroll tabs forward\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/tabs/tabs/tabs-styles.d.ts

@@ -0,0 +1,168 @@
+/**
+ * The bar. The underline variant draws its 1px track as a `before` line along
+ * the whole root, so the arrows sit on it too, and the 2px indicator, a layer
+ * above, covers it under the active tab.
+ */
+export declare const tabsStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        underline: {
+            root: string;
+            indicator: string;
+        };
+        segmented: {
+            root: string;
+            wrapper: string;
+            indicator: string;
+        };
+    };
+    layout: {
+        horizontal: {
+            root: string;
+            arrow: string;
+        };
+        vertical: {
+            root: string;
+            arrow: string;
+            wrapper: string;
+        };
+    };
+    indicatorPosition: {
+        start: {};
+        end: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+    wide: {
+        true: {
+            bar: string;
+            wrapper: string;
+        };
+        false: {};
+    };
+    animated: {
+        true: {
+            indicator: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    arrow: string;
+    bar: string;
+    wrapper: string;
+    indicator: string;
+}, undefined, {
+    variant: {
+        underline: {
+            root: string;
+            indicator: string;
+        };
+        segmented: {
+            root: string;
+            wrapper: string;
+            indicator: string;
+        };
+    };
+    layout: {
+        horizontal: {
+            root: string;
+            arrow: string;
+        };
+        vertical: {
+            root: string;
+            arrow: string;
+            wrapper: string;
+        };
+    };
+    indicatorPosition: {
+        start: {};
+        end: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+    wide: {
+        true: {
+            bar: string;
+            wrapper: string;
+        };
+        false: {};
+    };
+    animated: {
+        true: {
+            indicator: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    arrow: string;
+    bar: string;
+    wrapper: string;
+    indicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        underline: {
+            root: string;
+            indicator: string;
+        };
+        segmented: {
+            root: string;
+            wrapper: string;
+            indicator: string;
+        };
+    };
+    layout: {
+        horizontal: {
+            root: string;
+            arrow: string;
+        };
+        vertical: {
+            root: string;
+            arrow: string;
+            wrapper: string;
+        };
+    };
+    indicatorPosition: {
+        start: {};
+        end: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+    wide: {
+        true: {
+            bar: string;
+            wrapper: string;
+        };
+        false: {};
+    };
+    animated: {
+        true: {
+            indicator: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    arrow: string;
+    bar: string;
+    wrapper: string;
+    indicator: string;
+}>>;

package/dist/components/tabs/tabs/tabs-styles.js

@@ -0,0 +1,142 @@
+import { tv } from "../../../utils/tv.js";
+import { TabLayout, TabVariant } from "../tab-props.js";
+//#region src/components/tabs/tabs/tabs-styles.ts
+/**
+* The bar. The underline variant draws its 1px track as a `before` line along
+* the whole root, so the arrows sit on it too, and the 2px indicator, a layer
+* above, covers it under the active tab.
+*/
+var tabsStyles = tv({
+	slots: {
+		root: "",
+		arrow: "flex shrink-0 items-center justify-center",
+		bar: "no-scrollbar relative max-h-full overflow-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
+		wrapper: "inline-flex max-w-none",
+		indicator: "pointer-events-none absolute"
+	},
+	variants: {
+		variant: {
+			[TabVariant.underline]: {
+				root: `relative before:pointer-events-none before:absolute before:bg-rui-divider before:content-['']`,
+				indicator: "z-1 bg-rui-primary"
+			},
+			[TabVariant.segmented]: {
+				root: "rounded-rui-panel bg-rui-neutral-200 p-0.5 dark:bg-rui-neutral-800",
+				wrapper: "gap-0.5",
+				indicator: "rounded-rui-control bg-rui-surface shadow-rui-control dark:bg-rui-neutral-700"
+			}
+		},
+		layout: {
+			[TabLayout.horizontal]: {
+				root: "flex h-fit",
+				arrow: "w-8"
+			},
+			[TabLayout.vertical]: {
+				root: "inline-flex flex-col",
+				arrow: "h-8 w-full",
+				wrapper: "flex-col w-full"
+			}
+		},
+		indicatorPosition: {
+			start: {},
+			end: {}
+		},
+		color: {
+			primary: {},
+			secondary: {},
+			error: {},
+			warning: {},
+			info: {},
+			success: {}
+		},
+		wide: {
+			true: {
+				bar: "w-full",
+				wrapper: "min-w-full"
+			},
+			false: {}
+		},
+		animated: {
+			true: { indicator: "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none" },
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.horizontal,
+			indicatorPosition: "end",
+			class: {
+				root: "before:inset-x-0 before:bottom-0 before:h-px",
+				indicator: "bottom-0 h-0.5 rounded-t-full"
+			}
+		},
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.horizontal,
+			indicatorPosition: "start",
+			class: {
+				root: "before:inset-x-0 before:top-0 before:h-px",
+				indicator: "top-0 h-0.5 rounded-b-full"
+			}
+		},
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.vertical,
+			indicatorPosition: "end",
+			class: {
+				root: "before:inset-y-0 before:right-0 before:w-px",
+				indicator: "right-0 w-0.5 rounded-l-full"
+			}
+		},
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.vertical,
+			indicatorPosition: "start",
+			class: {
+				root: "before:inset-y-0 before:left-0 before:w-px",
+				indicator: "left-0 w-0.5 rounded-r-full"
+			}
+		},
+		{
+			variant: TabVariant.segmented,
+			layout: TabLayout.horizontal,
+			wide: false,
+			class: { root: "w-fit max-w-full" }
+		},
+		{
+			variant: TabVariant.underline,
+			color: "secondary",
+			class: { indicator: "bg-rui-secondary" }
+		},
+		{
+			variant: TabVariant.underline,
+			color: "error",
+			class: { indicator: "bg-rui-error" }
+		},
+		{
+			variant: TabVariant.underline,
+			color: "warning",
+			class: { indicator: "bg-rui-warning" }
+		},
+		{
+			variant: TabVariant.underline,
+			color: "info",
+			class: { indicator: "bg-rui-info" }
+		},
+		{
+			variant: TabVariant.underline,
+			color: "success",
+			class: { indicator: "bg-rui-success" }
+		}
+	],
+	defaultVariants: {
+		variant: TabVariant.underline,
+		layout: TabLayout.horizontal,
+		indicatorPosition: "end"
+	}
+});
+//#endregion
+export { tabsStyles };
+
+//# sourceMappingURL=tabs-styles.js.map

package/dist/components/tabs/tabs/tabs-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-styles.js","names":[],"sources":["../../../../src/components/tabs/tabs/tabs-styles.ts"],"sourcesContent":["import { TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { tv } from '@/utils/tv';\n\n/**\n * The bar. The underline variant draws its 1px track as a `before` line along\n * the whole root, so the arrows sit on it too, and the 2px indicator, a layer\n * above, covers it under the active tab.\n */\nexport const tabsStyles = tv({\n  slots: {\n    root: '',\n    arrow: 'flex shrink-0 items-center justify-center',\n    // a tab stop only when it scrolls with every tab disabled (useKeyboardScroll)\n    bar: 'no-scrollbar relative max-h-full overflow-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    wrapper: 'inline-flex max-w-none',\n    indicator: 'pointer-events-none absolute',\n  },\n  variants: {\n    variant: {\n      [TabVariant.underline]: {\n        root: `relative before:pointer-events-none before:absolute before:bg-rui-divider before:content-['']`,\n        indicator: 'z-1 bg-rui-primary',\n      },\n      [TabVariant.segmented]: {\n        // neutral-200, not 100: on a near-white page (`#fafafa`) the lighter track all but disappeared\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 dark:bg-rui-neutral-800',\n        wrapper: 'gap-0.5',\n        indicator: 'rounded-rui-control bg-rui-surface shadow-rui-control dark:bg-rui-neutral-700',\n      },\n    },\n    layout: {\n      [TabLayout.horizontal]: { root: 'flex h-fit', arrow: 'w-8' },\n      [TabLayout.vertical]: { root: 'inline-flex flex-col', arrow: 'h-8 w-full', wrapper: 'flex-col w-full' },\n    },\n    indicatorPosition: {\n      start: {},\n      end: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    wide: {\n      true: { bar: 'w-full', wrapper: 'min-w-full' },\n      false: {},\n    },\n    animated: {\n      true: { indicator: 'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end', class: { root: 'before:inset-x-0 before:bottom-0 before:h-px', indicator: 'bottom-0 h-0.5 rounded-t-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'start', class: { root: 'before:inset-x-0 before:top-0 before:h-px', indicator: 'top-0 h-0.5 rounded-b-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'end', class: { root: 'before:inset-y-0 before:right-0 before:w-px', indicator: 'right-0 w-0.5 rounded-l-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'start', class: { root: 'before:inset-y-0 before:left-0 before:w-px', indicator: 'left-0 w-0.5 rounded-r-full' } },\n    // the underline track spans its row, while a segmented control hugs its options unless it grows\n    { variant: TabVariant.segmented, layout: TabLayout.horizontal, wide: false, class: { root: 'w-fit max-w-full' } },\n    // `color` picks the underline's color; the segmented pill stays a neutral surface\n    { variant: TabVariant.underline, color: 'secondary', class: { indicator: 'bg-rui-secondary' } },\n    { variant: TabVariant.underline, color: 'error', class: { indicator: 'bg-rui-error' } },\n    { variant: TabVariant.underline, color: 'warning', class: { indicator: 'bg-rui-warning' } },\n    { variant: TabVariant.underline, color: 'info', class: { indicator: 'bg-rui-info' } },\n    { variant: TabVariant.underline, color: 'success', class: { indicator: 'bg-rui-success' } },\n  ],\n  defaultVariants: { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end' },\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,aAAa,GAAG;CAC3B,OAAO;EACL,MAAM;EACN,OAAO;EAEP,KAAK;EACL,SAAS;EACT,WAAW;CACb;CACA,UAAU;EACR,SAAS;IACN,WAAW,YAAY;IACtB,MAAM;IACN,WAAW;GACb;IACC,WAAW,YAAY;IAEtB,MAAM;IACN,SAAS;IACT,WAAW;GACb;EACF;EACA,QAAQ;IACL,UAAU,aAAa;IAAE,MAAM;IAAc,OAAO;GAAM;IAC1D,UAAU,WAAW;IAAE,MAAM;IAAwB,OAAO;IAAc,SAAS;GAAkB;EACxG;EACA,mBAAmB;GACjB,OAAO,CAAC;GACR,KAAK,CAAC;EACR;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;EACA,MAAM;GACJ,MAAM;IAAE,KAAK;IAAU,SAAS;GAAa;GAC7C,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM,EAAE,WAAW,yFAAyF;GAC5G,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAY,mBAAmB;GAAO,OAAO;IAAE,MAAM;IAAgD,WAAW;GAAgC;EAAE;EACrM;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAY,mBAAmB;GAAS,OAAO;IAAE,MAAM;IAA6C,WAAW;GAA6B;EAAE;EACjM;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAU,mBAAmB;GAAO,OAAO;IAAE,MAAM;IAA+C,WAAW;GAA+B;EAAE;EACjM;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAU,mBAAmB;GAAS,OAAO;IAAE,MAAM;IAA8C,WAAW;GAA8B;EAAE;EAEjM;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAY,MAAM;GAAO,OAAO,EAAE,MAAM,mBAAmB;EAAE;EAEhH;GAAE,SAAS,WAAW;GAAW,OAAO;GAAa,OAAO,EAAE,WAAW,mBAAmB;EAAE;EAC9F;GAAE,SAAS,WAAW;GAAW,OAAO;GAAS,OAAO,EAAE,WAAW,eAAe;EAAE;EACtF;GAAE,SAAS,WAAW;GAAW,OAAO;GAAW,OAAO,EAAE,WAAW,iBAAiB;EAAE;EAC1F;GAAE,SAAS,WAAW;GAAW,OAAO;GAAQ,OAAO,EAAE,WAAW,cAAc;EAAE;EACpF;GAAE,SAAS,WAAW;GAAW,OAAO;GAAW,OAAO,EAAE,WAAW,iBAAiB;EAAE;CAC5F;CACA,iBAAiB;EAAE,SAAS,WAAW;EAAW,QAAQ,UAAU;EAAY,mBAAmB;CAAM;AAC3G,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTimePicker.js","names":["_sfc_main"],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n  accuracy?: TimeAccuracy;\n  borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n  hour: 12,\n  minute: 60,\n  second: 60,\n  millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n  hour: 1,\n  minute: 5,\n  second: 5,\n  millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n  () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n  isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n  if (!isDefined(selectedHour)) {\n    return undefined;\n  }\n  const hourValue = get(selectedHour);\n  const hour = hourValue % TWELVE_HOURS;\n  return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour);\n  }\n  else if (mode === 'minute') {\n    return get(selectedMinute);\n  }\n  else if (mode === 'second') {\n    return get(selectedSecond);\n  }\n  else {\n    return get(selectedMillisecond);\n  }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour' || !isDefined(editedValue)) {\n    return false;\n  }\n  else {\n    const interval = intervals[mode];\n    const value = get(editedValue);\n    return value % interval !== 0;\n  }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  return {\n    height: '36%',\n    top: '14%',\n    left: '50%',\n    transformOrigin: 'bottom center',\n    transform: `translateX(-50%) rotate(${angle}deg)`,\n    zIndex: 10,\n  };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const radius = '38%';\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  const radians = (angle * Math.PI) / 180;\n\n  const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n  const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n  return {\n    position: 'absolute',\n    top: `${y}%`,\n    left: `${x}%`,\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 11,\n  };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n  const mode = get(editMode);\n  const interval = intervals[mode];\n  const total = totalItemsPerMode[mode];\n  const numbers = generateNumbers(total, interval);\n  if (mode === 'hour') {\n    numbers[0] = 12;\n  }\n  return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n  return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n    ? new Date(get(modelValue)).getMilliseconds()\n    : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n  const numbers: number[] = [];\n  for (let i = 0; i < total; i += interval) {\n    numbers.push(i);\n  }\n  return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n  return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n  const radius = '38%';\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n  const radians = (angle * Math.PI) / 180;\n  const x = 50 + parseFloat(radius) * Math.cos(radians);\n  const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n  return {\n    top: `${y}%`,\n    left: `${x}%`,\n    transform: 'translate(-50%, -50%)',\n  };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n  if (!isDefined(editedValue)) {\n    return false;\n  }\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour) === num;\n  }\n  else {\n    const value = get(editedValue);\n    const interval = intervals[mode];\n    return value === num || (value % interval === 0 && value === num);\n  }\n}\n\nfunction toggleAmPm(): void {\n  if (!isDefined(selectedHour)) {\n    return;\n  }\n  if (get(selectedHour) < TWELVE_HOURS) {\n    set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n  }\n  else {\n    set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n  }\n\n  updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n  event.preventDefault();\n  set(isDragging, true);\n\n  if (!isDefined(clockFace))\n    return;\n\n  const rect = get(clockFace).getBoundingClientRect();\n  const centerX = rect.left + rect.width / 2;\n  const centerY = rect.top + rect.height / 2;\n  let rafId: number | null = null;\n\n  const applyMove = (clientX: number, clientY: number): void => {\n    const x = clientX - centerX;\n    const y = clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0)\n      angle += FULL_CIRCLE;\n\n    const mode = get(editMode);\n    const unit =\n      Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour = unit;\n      if (hour === 0)\n        hour = TWELVE_HOURS;\n\n      if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n        hour += TWELVE_HOURS;\n      }\n      else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n        hour = 0;\n      }\n\n      set(selectedHour, hour);\n    }\n    else if (mode === 'minute') {\n      set(selectedMinute, unit);\n    }\n    else if (mode === 'second') {\n      set(selectedSecond, unit);\n    }\n    else {\n      set(selectedMillisecond, unit);\n    }\n\n    updateModelValue();\n  };\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n    if (!get(isDragging))\n      return;\n\n    if (rafId !== null)\n      return;\n\n    let clientX: number;\n    let clientY: number;\n\n    if ('touches' in moveEvent) {\n      const touch = moveEvent.touches[0];\n      assert(touch);\n      clientX = touch.clientX;\n      clientY = touch.clientY;\n    }\n    else {\n      clientX = moveEvent.clientX;\n      clientY = moveEvent.clientY;\n    }\n\n    rafId = requestAnimationFrame(() => {\n      applyMove(clientX, clientY);\n      rafId = null;\n    });\n  };\n\n  const handleEnd = (): void => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n    set(isDragging, false);\n    document.removeEventListener('mousemove', handleMove);\n    document.removeEventListener('touchmove', handleMove);\n    document.removeEventListener('mouseup', handleEnd);\n    document.removeEventListener('touchend', handleEnd);\n\n    if (get(editMode) === 'hour') {\n      set(editMode, 'minute');\n    }\n    else if (get(showSecond) && get(editMode) === 'minute') {\n      set(editMode, 'second');\n    }\n    else if (get(showMillisecond) && get(editMode) === 'second') {\n      set(editMode, 'millisecond');\n    }\n  };\n\n  document.addEventListener('mousemove', handleMove);\n  document.addEventListener('touchmove', handleMove);\n  document.addEventListener('mouseup', handleEnd);\n  document.addEventListener('touchend', handleEnd);\n\n  // Apply initial position synchronously for immediate feedback\n  const initialEvent = event;\n  let clientX: number;\n  let clientY: number;\n  if ('touches' in initialEvent) {\n    const touch = initialEvent.touches[0];\n    assert(touch);\n    clientX = touch.clientX;\n    clientY = touch.clientY;\n  }\n  else {\n    clientX = initialEvent.clientX;\n    clientY = initialEvent.clientY;\n  }\n  applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    let newHour = num;\n\n    if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n      newHour += TWELVE_HOURS;\n    }\n\n    set(selectedHour, newHour);\n    set(editMode, 'minute');\n  }\n  else if (mode === 'minute') {\n    set(selectedMinute, num);\n    if (get(showSecond))\n      set(editMode, 'second');\n  }\n  else if (mode === 'second') {\n    set(selectedSecond, num);\n    if (get(showMillisecond)) {\n      set(editMode, 'millisecond');\n    }\n  }\n  else if (mode === 'millisecond') {\n    set(selectedMillisecond, num);\n  }\n\n  updateModelValue();\n}\n\nfunction updateModelValue(): void {\n  if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n    return;\n  }\n  nextTick(() => {\n    const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n    date.setHours(get(selectedHour));\n    date.setMinutes(get(selectedMinute));\n    date.setSeconds(get(selectedSecond) ?? 0);\n    date.setMilliseconds(get(selectedMillisecond) ?? 0);\n    set(modelValue, date);\n  });\n}\n\nwatch(\n  modelValue,\n  () => {\n    set(selectedHour, getModelHours());\n    set(selectedMinute, getModelMinutes());\n    set(selectedSecond, getModelSeconds());\n    set(selectedMillisecond, getModelMilliseconds());\n  },\n);\n\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Time picker\"\n    :class=\"ui.root({ bordered: !borderless })\"\n  >\n    <div :class=\"ui.digitalDisplay()\">\n      <div :class=\"ui.time()\">\n        <button\n          type=\"button\"\n          data-id=\"hour\"\n          :aria-label=\"`${formatValue(displayHour)} hours`\"\n          :aria-pressed=\"editMode === 'hour'\"\n          :class=\"ui.digit({ active: editMode === 'hour' })\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </button>\n        <div :class=\"ui.separator()\">\n          :\n        </div>\n        <button\n          type=\"button\"\n          data-id=\"minute\"\n          :aria-label=\"`${formatValue(selectedMinute)} minutes`\"\n          :aria-pressed=\"editMode === 'minute'\"\n          :class=\"ui.digit({ active: editMode === 'minute' })\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </button>\n        <div\n          v-if=\"showSecond\"\n          :class=\"ui.separator()\"\n        >\n          :\n        </div>\n        <button\n          v-if=\"showSecond\"\n          type=\"button\"\n          data-id=\"second\"\n          :aria-label=\"`${formatValue(selectedSecond)} seconds`\"\n          :aria-pressed=\"editMode === 'second'\"\n          :class=\"ui.digit({ active: editMode === 'second' })\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </button>\n\n        <div\n          v-if=\"showMillisecond\"\n          :class=\"ui.separator({ class: 'text-lg' })\"\n        >\n          .\n        </div>\n\n        <button\n          v-if=\"showMillisecond\"\n          type=\"button\"\n          data-id=\"millisecond\"\n          :aria-label=\"`${formatValue(selectedMillisecond, 3)} milliseconds`\"\n          :aria-pressed=\"editMode === 'millisecond'\"\n          :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Toggle AM/PM\"\n        :class=\"ui.period()\"\n        @click=\"toggleAmPm()\"\n      >\n        {{ period }}\n      </button>\n    </div>\n\n    <div\n      ref=\"clockFace\"\n      role=\"listbox\"\n      :aria-label=\"`Select ${editMode}`\"\n      :class=\"ui.clockFace()\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"ui.centerDot()\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"ui.clockHand()\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"ui.clockHandCircle()\"\n        :style=\"clockHandCircleStyle\"\n      />\n\n      <div\n        v-for=\"num in clockNumbers\"\n        :key=\"`num-${num}`\"\n        role=\"option\"\n        :aria-selected=\"isSelectedNumber(num)\"\n        :class=\"[\n          ui.clockNumber({ selected: isSelectedNumber(num) }),\n          `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n        ]\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTimePicker.js","names":["_sfc_main"],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type HTMLAttributes, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n  accuracy?: TimeAccuracy;\n  borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof RuiTimePickerProps>>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n  hour: 12,\n  minute: 60,\n  second: 60,\n  millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n  hour: 1,\n  minute: 5,\n  second: 5,\n  millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n  () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n  isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n  if (!isDefined(selectedHour)) {\n    return undefined;\n  }\n  const hourValue = get(selectedHour);\n  const hour = hourValue % TWELVE_HOURS;\n  return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour);\n  }\n  else if (mode === 'minute') {\n    return get(selectedMinute);\n  }\n  else if (mode === 'second') {\n    return get(selectedSecond);\n  }\n  else {\n    return get(selectedMillisecond);\n  }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour' || !isDefined(editedValue)) {\n    return false;\n  }\n  else {\n    const interval = intervals[mode];\n    const value = get(editedValue);\n    return value % interval !== 0;\n  }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  return {\n    height: '36%',\n    top: '14%',\n    left: '50%',\n    transformOrigin: 'bottom center',\n    transform: `translateX(-50%) rotate(${angle}deg)`,\n    zIndex: 10,\n  };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const radius = '38%';\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  const radians = (angle * Math.PI) / 180;\n\n  const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n  const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n  return {\n    position: 'absolute',\n    top: `${y}%`,\n    left: `${x}%`,\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 11,\n  };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n  const mode = get(editMode);\n  const interval = intervals[mode];\n  const total = totalItemsPerMode[mode];\n  const numbers = generateNumbers(total, interval);\n  if (mode === 'hour') {\n    numbers[0] = 12;\n  }\n  return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n  return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n    ? new Date(get(modelValue)).getMilliseconds()\n    : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n  const numbers: number[] = [];\n  for (let i = 0; i < total; i += interval) {\n    numbers.push(i);\n  }\n  return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n  return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n  const radius = '38%';\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n  const radians = (angle * Math.PI) / 180;\n  const x = 50 + parseFloat(radius) * Math.cos(radians);\n  const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n  return {\n    top: `${y}%`,\n    left: `${x}%`,\n    transform: 'translate(-50%, -50%)',\n  };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n  if (!isDefined(editedValue)) {\n    return false;\n  }\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour) === num;\n  }\n  else {\n    const value = get(editedValue);\n    const interval = intervals[mode];\n    return value === num || (value % interval === 0 && value === num);\n  }\n}\n\nfunction toggleAmPm(): void {\n  if (!isDefined(selectedHour)) {\n    return;\n  }\n  if (get(selectedHour) < TWELVE_HOURS) {\n    set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n  }\n  else {\n    set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n  }\n\n  updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n  event.preventDefault();\n  set(isDragging, true);\n\n  if (!isDefined(clockFace))\n    return;\n\n  const rect = get(clockFace).getBoundingClientRect();\n  const centerX = rect.left + rect.width / 2;\n  const centerY = rect.top + rect.height / 2;\n  let rafId: number | null = null;\n\n  const applyMove = (clientX: number, clientY: number): void => {\n    const x = clientX - centerX;\n    const y = clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0)\n      angle += FULL_CIRCLE;\n\n    const mode = get(editMode);\n    const unit =\n      Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour = unit;\n      if (hour === 0)\n        hour = TWELVE_HOURS;\n\n      if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n        hour += TWELVE_HOURS;\n      }\n      else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n        hour = 0;\n      }\n\n      set(selectedHour, hour);\n    }\n    else if (mode === 'minute') {\n      set(selectedMinute, unit);\n    }\n    else if (mode === 'second') {\n      set(selectedSecond, unit);\n    }\n    else {\n      set(selectedMillisecond, unit);\n    }\n\n    updateModelValue();\n  };\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n    if (!get(isDragging))\n      return;\n\n    if (rafId !== null)\n      return;\n\n    let clientX: number;\n    let clientY: number;\n\n    if ('touches' in moveEvent) {\n      const touch = moveEvent.touches[0];\n      assert(touch);\n      clientX = touch.clientX;\n      clientY = touch.clientY;\n    }\n    else {\n      clientX = moveEvent.clientX;\n      clientY = moveEvent.clientY;\n    }\n\n    rafId = requestAnimationFrame(() => {\n      applyMove(clientX, clientY);\n      rafId = null;\n    });\n  };\n\n  const handleEnd = (): void => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n    set(isDragging, false);\n    document.removeEventListener('mousemove', handleMove);\n    document.removeEventListener('touchmove', handleMove);\n    document.removeEventListener('mouseup', handleEnd);\n    document.removeEventListener('touchend', handleEnd);\n\n    if (get(editMode) === 'hour') {\n      set(editMode, 'minute');\n    }\n    else if (get(showSecond) && get(editMode) === 'minute') {\n      set(editMode, 'second');\n    }\n    else if (get(showMillisecond) && get(editMode) === 'second') {\n      set(editMode, 'millisecond');\n    }\n  };\n\n  document.addEventListener('mousemove', handleMove);\n  document.addEventListener('touchmove', handleMove);\n  document.addEventListener('mouseup', handleEnd);\n  document.addEventListener('touchend', handleEnd);\n\n  // Apply initial position synchronously for immediate feedback\n  const initialEvent = event;\n  let clientX: number;\n  let clientY: number;\n  if ('touches' in initialEvent) {\n    const touch = initialEvent.touches[0];\n    assert(touch);\n    clientX = touch.clientX;\n    clientY = touch.clientY;\n  }\n  else {\n    clientX = initialEvent.clientX;\n    clientY = initialEvent.clientY;\n  }\n  applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    let newHour = num;\n\n    if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n      newHour += TWELVE_HOURS;\n    }\n\n    set(selectedHour, newHour);\n    set(editMode, 'minute');\n  }\n  else if (mode === 'minute') {\n    set(selectedMinute, num);\n    if (get(showSecond))\n      set(editMode, 'second');\n  }\n  else if (mode === 'second') {\n    set(selectedSecond, num);\n    if (get(showMillisecond)) {\n      set(editMode, 'millisecond');\n    }\n  }\n  else if (mode === 'millisecond') {\n    set(selectedMillisecond, num);\n  }\n\n  updateModelValue();\n}\n\nfunction updateModelValue(): void {\n  if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n    return;\n  }\n  nextTick(() => {\n    const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n    date.setHours(get(selectedHour));\n    date.setMinutes(get(selectedMinute));\n    date.setSeconds(get(selectedSecond) ?? 0);\n    date.setMilliseconds(get(selectedMillisecond) ?? 0);\n    set(modelValue, date);\n  });\n}\n\nwatch(\n  modelValue,\n  () => {\n    set(selectedHour, getModelHours());\n    set(selectedMinute, getModelMinutes());\n    set(selectedSecond, getModelSeconds());\n    set(selectedMillisecond, getModelMilliseconds());\n  },\n);\n\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Time picker\"\n    :class=\"ui.root({ bordered: !borderless })\"\n  >\n    <div :class=\"ui.digitalDisplay()\">\n      <div :class=\"ui.time()\">\n        <button\n          type=\"button\"\n          data-id=\"hour\"\n          :aria-label=\"`${formatValue(displayHour)} hours`\"\n          :aria-pressed=\"editMode === 'hour'\"\n          :class=\"ui.digit({ active: editMode === 'hour' })\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </button>\n        <div :class=\"ui.separator()\">\n          :\n        </div>\n        <button\n          type=\"button\"\n          data-id=\"minute\"\n          :aria-label=\"`${formatValue(selectedMinute)} minutes`\"\n          :aria-pressed=\"editMode === 'minute'\"\n          :class=\"ui.digit({ active: editMode === 'minute' })\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </button>\n        <div\n          v-if=\"showSecond\"\n          :class=\"ui.separator()\"\n        >\n          :\n        </div>\n        <button\n          v-if=\"showSecond\"\n          type=\"button\"\n          data-id=\"second\"\n          :aria-label=\"`${formatValue(selectedSecond)} seconds`\"\n          :aria-pressed=\"editMode === 'second'\"\n          :class=\"ui.digit({ active: editMode === 'second' })\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </button>\n\n        <div\n          v-if=\"showMillisecond\"\n          :class=\"ui.separator({ class: 'text-lg' })\"\n        >\n          .\n        </div>\n\n        <button\n          v-if=\"showMillisecond\"\n          type=\"button\"\n          data-id=\"millisecond\"\n          :aria-label=\"`${formatValue(selectedMillisecond, 3)} milliseconds`\"\n          :aria-pressed=\"editMode === 'millisecond'\"\n          :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Toggle AM/PM\"\n        :class=\"ui.period()\"\n        @click=\"toggleAmPm()\"\n      >\n        {{ period }}\n      </button>\n    </div>\n\n    <div\n      ref=\"clockFace\"\n      role=\"listbox\"\n      :aria-label=\"`Select ${editMode}`\"\n      :class=\"ui.clockFace()\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"ui.centerDot()\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"ui.clockHand()\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"ui.clockHandCircle()\"\n        :style=\"clockHandCircleStyle\"\n      />\n\n      <div\n        v-for=\"num in clockNumbers\"\n        :key=\"`num-${num}`\"\n        role=\"option\"\n        :aria-selected=\"isSelectedNumber(num)\"\n        :class=\"[\n          ui.clockNumber({ selected: isSelectedNumber(num) }),\n          `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n        ]\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/time-picker/RuiTimePicker.vue.d.ts

@@ -1,10 +1,11 @@
+import { type HTMLAttributes } from 'vue';
 import { TimeAccuracy } from '../../consts/time-accuracy.js';
 export type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';
 export interface RuiTimePickerProps {
     accuracy?: TimeAccuracy;
     borderless?: boolean;
 }
-type __VLS_Props = RuiTimePickerProps;
+type __VLS_Props = RuiTimePickerProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof RuiTimePickerProps>;
 type __VLS_ModelProps = {
     modelValue: Date | undefined;
     'hour'?: number | undefined;

package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_createCommentVNode","_normalizeStyle","_Fragment","_renderList"],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n  accuracy?: TimeAccuracy;\n  borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n  hour: 12,\n  minute: 60,\n  second: 60,\n  millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n  hour: 1,\n  minute: 5,\n  second: 5,\n  millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n  () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n  isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n  if (!isDefined(selectedHour)) {\n    return undefined;\n  }\n  const hourValue = get(selectedHour);\n  const hour = hourValue % TWELVE_HOURS;\n  return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour);\n  }\n  else if (mode === 'minute') {\n    return get(selectedMinute);\n  }\n  else if (mode === 'second') {\n    return get(selectedSecond);\n  }\n  else {\n    return get(selectedMillisecond);\n  }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour' || !isDefined(editedValue)) {\n    return false;\n  }\n  else {\n    const interval = intervals[mode];\n    const value = get(editedValue);\n    return value % interval !== 0;\n  }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  return {\n    height: '36%',\n    top: '14%',\n    left: '50%',\n    transformOrigin: 'bottom center',\n    transform: `translateX(-50%) rotate(${angle}deg)`,\n    zIndex: 10,\n  };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const radius = '38%';\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  const radians = (angle * Math.PI) / 180;\n\n  const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n  const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n  return {\n    position: 'absolute',\n    top: `${y}%`,\n    left: `${x}%`,\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 11,\n  };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n  const mode = get(editMode);\n  const interval = intervals[mode];\n  const total = totalItemsPerMode[mode];\n  const numbers = generateNumbers(total, interval);\n  if (mode === 'hour') {\n    numbers[0] = 12;\n  }\n  return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n  return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n    ? new Date(get(modelValue)).getMilliseconds()\n    : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n  const numbers: number[] = [];\n  for (let i = 0; i < total; i += interval) {\n    numbers.push(i);\n  }\n  return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n  return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n  const radius = '38%';\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n  const radians = (angle * Math.PI) / 180;\n  const x = 50 + parseFloat(radius) * Math.cos(radians);\n  const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n  return {\n    top: `${y}%`,\n    left: `${x}%`,\n    transform: 'translate(-50%, -50%)',\n  };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n  if (!isDefined(editedValue)) {\n    return false;\n  }\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour) === num;\n  }\n  else {\n    const value = get(editedValue);\n    const interval = intervals[mode];\n    return value === num || (value % interval === 0 && value === num);\n  }\n}\n\nfunction toggleAmPm(): void {\n  if (!isDefined(selectedHour)) {\n    return;\n  }\n  if (get(selectedHour) < TWELVE_HOURS) {\n    set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n  }\n  else {\n    set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n  }\n\n  updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n  event.preventDefault();\n  set(isDragging, true);\n\n  if (!isDefined(clockFace))\n    return;\n\n  const rect = get(clockFace).getBoundingClientRect();\n  const centerX = rect.left + rect.width / 2;\n  const centerY = rect.top + rect.height / 2;\n  let rafId: number | null = null;\n\n  const applyMove = (clientX: number, clientY: number): void => {\n    const x = clientX - centerX;\n    const y = clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0)\n      angle += FULL_CIRCLE;\n\n    const mode = get(editMode);\n    const unit =\n      Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour = unit;\n      if (hour === 0)\n        hour = TWELVE_HOURS;\n\n      if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n        hour += TWELVE_HOURS;\n      }\n      else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n        hour = 0;\n      }\n\n      set(selectedHour, hour);\n    }\n    else if (mode === 'minute') {\n      set(selectedMinute, unit);\n    }\n    else if (mode === 'second') {\n      set(selectedSecond, unit);\n    }\n    else {\n      set(selectedMillisecond, unit);\n    }\n\n    updateModelValue();\n  };\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n    if (!get(isDragging))\n      return;\n\n    if (rafId !== null)\n      return;\n\n    let clientX: number;\n    let clientY: number;\n\n    if ('touches' in moveEvent) {\n      const touch = moveEvent.touches[0];\n      assert(touch);\n      clientX = touch.clientX;\n      clientY = touch.clientY;\n    }\n    else {\n      clientX = moveEvent.clientX;\n      clientY = moveEvent.clientY;\n    }\n\n    rafId = requestAnimationFrame(() => {\n      applyMove(clientX, clientY);\n      rafId = null;\n    });\n  };\n\n  const handleEnd = (): void => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n    set(isDragging, false);\n    document.removeEventListener('mousemove', handleMove);\n    document.removeEventListener('touchmove', handleMove);\n    document.removeEventListener('mouseup', handleEnd);\n    document.removeEventListener('touchend', handleEnd);\n\n    if (get(editMode) === 'hour') {\n      set(editMode, 'minute');\n    }\n    else if (get(showSecond) && get(editMode) === 'minute') {\n      set(editMode, 'second');\n    }\n    else if (get(showMillisecond) && get(editMode) === 'second') {\n      set(editMode, 'millisecond');\n    }\n  };\n\n  document.addEventListener('mousemove', handleMove);\n  document.addEventListener('touchmove', handleMove);\n  document.addEventListener('mouseup', handleEnd);\n  document.addEventListener('touchend', handleEnd);\n\n  // Apply initial position synchronously for immediate feedback\n  const initialEvent = event;\n  let clientX: number;\n  let clientY: number;\n  if ('touches' in initialEvent) {\n    const touch = initialEvent.touches[0];\n    assert(touch);\n    clientX = touch.clientX;\n    clientY = touch.clientY;\n  }\n  else {\n    clientX = initialEvent.clientX;\n    clientY = initialEvent.clientY;\n  }\n  applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    let newHour = num;\n\n    if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n      newHour += TWELVE_HOURS;\n    }\n\n    set(selectedHour, newHour);\n    set(editMode, 'minute');\n  }\n  else if (mode === 'minute') {\n    set(selectedMinute, num);\n    if (get(showSecond))\n      set(editMode, 'second');\n  }\n  else if (mode === 'second') {\n    set(selectedSecond, num);\n    if (get(showMillisecond)) {\n      set(editMode, 'millisecond');\n    }\n  }\n  else if (mode === 'millisecond') {\n    set(selectedMillisecond, num);\n  }\n\n  updateModelValue();\n}\n\nfunction updateModelValue(): void {\n  if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n    return;\n  }\n  nextTick(() => {\n    const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n    date.setHours(get(selectedHour));\n    date.setMinutes(get(selectedMinute));\n    date.setSeconds(get(selectedSecond) ?? 0);\n    date.setMilliseconds(get(selectedMillisecond) ?? 0);\n    set(modelValue, date);\n  });\n}\n\nwatch(\n  modelValue,\n  () => {\n    set(selectedHour, getModelHours());\n    set(selectedMinute, getModelMinutes());\n    set(selectedSecond, getModelSeconds());\n    set(selectedMillisecond, getModelMilliseconds());\n  },\n);\n\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Time picker\"\n    :class=\"ui.root({ bordered: !borderless })\"\n  >\n    <div :class=\"ui.digitalDisplay()\">\n      <div :class=\"ui.time()\">\n        <button\n          type=\"button\"\n          data-id=\"hour\"\n          :aria-label=\"`${formatValue(displayHour)} hours`\"\n          :aria-pressed=\"editMode === 'hour'\"\n          :class=\"ui.digit({ active: editMode === 'hour' })\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </button>\n        <div :class=\"ui.separator()\">\n          :\n        </div>\n        <button\n          type=\"button\"\n          data-id=\"minute\"\n          :aria-label=\"`${formatValue(selectedMinute)} minutes`\"\n          :aria-pressed=\"editMode === 'minute'\"\n          :class=\"ui.digit({ active: editMode === 'minute' })\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </button>\n        <div\n          v-if=\"showSecond\"\n          :class=\"ui.separator()\"\n        >\n          :\n        </div>\n        <button\n          v-if=\"showSecond\"\n          type=\"button\"\n          data-id=\"second\"\n          :aria-label=\"`${formatValue(selectedSecond)} seconds`\"\n          :aria-pressed=\"editMode === 'second'\"\n          :class=\"ui.digit({ active: editMode === 'second' })\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </button>\n\n        <div\n          v-if=\"showMillisecond\"\n          :class=\"ui.separator({ class: 'text-lg' })\"\n        >\n          .\n        </div>\n\n        <button\n          v-if=\"showMillisecond\"\n          type=\"button\"\n          data-id=\"millisecond\"\n          :aria-label=\"`${formatValue(selectedMillisecond, 3)} milliseconds`\"\n          :aria-pressed=\"editMode === 'millisecond'\"\n          :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Toggle AM/PM\"\n        :class=\"ui.period()\"\n        @click=\"toggleAmPm()\"\n      >\n        {{ period }}\n      </button>\n    </div>\n\n    <div\n      ref=\"clockFace\"\n      role=\"listbox\"\n      :aria-label=\"`Select ${editMode}`\"\n      :class=\"ui.clockFace()\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"ui.centerDot()\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"ui.clockHand()\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"ui.clockHandCircle()\"\n        :style=\"clockHandCircleStyle\"\n      />\n\n      <div\n        v-for=\"num in clockNumbers\"\n        :key=\"`num-${num}`\"\n        role=\"option\"\n        :aria-selected=\"isSelectedNumber(num)\"\n        :class=\"[\n          ui.clockNumber({ selected: isSelectedNumber(num) }),\n          `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n        ]\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_createCommentVNode","_normalizeStyle","_Fragment","_renderList"],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type HTMLAttributes, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n  accuracy?: TimeAccuracy;\n  borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof RuiTimePickerProps>>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n  hour: 12,\n  minute: 60,\n  second: 60,\n  millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n  hour: 1,\n  minute: 5,\n  second: 5,\n  millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n  () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n  isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n  if (!isDefined(selectedHour)) {\n    return undefined;\n  }\n  const hourValue = get(selectedHour);\n  const hour = hourValue % TWELVE_HOURS;\n  return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour);\n  }\n  else if (mode === 'minute') {\n    return get(selectedMinute);\n  }\n  else if (mode === 'second') {\n    return get(selectedSecond);\n  }\n  else {\n    return get(selectedMillisecond);\n  }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour' || !isDefined(editedValue)) {\n    return false;\n  }\n  else {\n    const interval = intervals[mode];\n    const value = get(editedValue);\n    return value % interval !== 0;\n  }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  return {\n    height: '36%',\n    top: '14%',\n    left: '50%',\n    transformOrigin: 'bottom center',\n    transform: `translateX(-50%) rotate(${angle}deg)`,\n    zIndex: 10,\n  };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const radius = '38%';\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  const radians = (angle * Math.PI) / 180;\n\n  const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n  const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n  return {\n    position: 'absolute',\n    top: `${y}%`,\n    left: `${x}%`,\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 11,\n  };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n  const mode = get(editMode);\n  const interval = intervals[mode];\n  const total = totalItemsPerMode[mode];\n  const numbers = generateNumbers(total, interval);\n  if (mode === 'hour') {\n    numbers[0] = 12;\n  }\n  return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n  return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n    ? new Date(get(modelValue)).getMilliseconds()\n    : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n  const numbers: number[] = [];\n  for (let i = 0; i < total; i += interval) {\n    numbers.push(i);\n  }\n  return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n  return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n  const radius = '38%';\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n  const radians = (angle * Math.PI) / 180;\n  const x = 50 + parseFloat(radius) * Math.cos(radians);\n  const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n  return {\n    top: `${y}%`,\n    left: `${x}%`,\n    transform: 'translate(-50%, -50%)',\n  };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n  if (!isDefined(editedValue)) {\n    return false;\n  }\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour) === num;\n  }\n  else {\n    const value = get(editedValue);\n    const interval = intervals[mode];\n    return value === num || (value % interval === 0 && value === num);\n  }\n}\n\nfunction toggleAmPm(): void {\n  if (!isDefined(selectedHour)) {\n    return;\n  }\n  if (get(selectedHour) < TWELVE_HOURS) {\n    set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n  }\n  else {\n    set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n  }\n\n  updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n  event.preventDefault();\n  set(isDragging, true);\n\n  if (!isDefined(clockFace))\n    return;\n\n  const rect = get(clockFace).getBoundingClientRect();\n  const centerX = rect.left + rect.width / 2;\n  const centerY = rect.top + rect.height / 2;\n  let rafId: number | null = null;\n\n  const applyMove = (clientX: number, clientY: number): void => {\n    const x = clientX - centerX;\n    const y = clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0)\n      angle += FULL_CIRCLE;\n\n    const mode = get(editMode);\n    const unit =\n      Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour = unit;\n      if (hour === 0)\n        hour = TWELVE_HOURS;\n\n      if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n        hour += TWELVE_HOURS;\n      }\n      else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n        hour = 0;\n      }\n\n      set(selectedHour, hour);\n    }\n    else if (mode === 'minute') {\n      set(selectedMinute, unit);\n    }\n    else if (mode === 'second') {\n      set(selectedSecond, unit);\n    }\n    else {\n      set(selectedMillisecond, unit);\n    }\n\n    updateModelValue();\n  };\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n    if (!get(isDragging))\n      return;\n\n    if (rafId !== null)\n      return;\n\n    let clientX: number;\n    let clientY: number;\n\n    if ('touches' in moveEvent) {\n      const touch = moveEvent.touches[0];\n      assert(touch);\n      clientX = touch.clientX;\n      clientY = touch.clientY;\n    }\n    else {\n      clientX = moveEvent.clientX;\n      clientY = moveEvent.clientY;\n    }\n\n    rafId = requestAnimationFrame(() => {\n      applyMove(clientX, clientY);\n      rafId = null;\n    });\n  };\n\n  const handleEnd = (): void => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n    set(isDragging, false);\n    document.removeEventListener('mousemove', handleMove);\n    document.removeEventListener('touchmove', handleMove);\n    document.removeEventListener('mouseup', handleEnd);\n    document.removeEventListener('touchend', handleEnd);\n\n    if (get(editMode) === 'hour') {\n      set(editMode, 'minute');\n    }\n    else if (get(showSecond) && get(editMode) === 'minute') {\n      set(editMode, 'second');\n    }\n    else if (get(showMillisecond) && get(editMode) === 'second') {\n      set(editMode, 'millisecond');\n    }\n  };\n\n  document.addEventListener('mousemove', handleMove);\n  document.addEventListener('touchmove', handleMove);\n  document.addEventListener('mouseup', handleEnd);\n  document.addEventListener('touchend', handleEnd);\n\n  // Apply initial position synchronously for immediate feedback\n  const initialEvent = event;\n  let clientX: number;\n  let clientY: number;\n  if ('touches' in initialEvent) {\n    const touch = initialEvent.touches[0];\n    assert(touch);\n    clientX = touch.clientX;\n    clientY = touch.clientY;\n  }\n  else {\n    clientX = initialEvent.clientX;\n    clientY = initialEvent.clientY;\n  }\n  applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    let newHour = num;\n\n    if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n      newHour += TWELVE_HOURS;\n    }\n\n    set(selectedHour, newHour);\n    set(editMode, 'minute');\n  }\n  else if (mode === 'minute') {\n    set(selectedMinute, num);\n    if (get(showSecond))\n      set(editMode, 'second');\n  }\n  else if (mode === 'second') {\n    set(selectedSecond, num);\n    if (get(showMillisecond)) {\n      set(editMode, 'millisecond');\n    }\n  }\n  else if (mode === 'millisecond') {\n    set(selectedMillisecond, num);\n  }\n\n  updateModelValue();\n}\n\nfunction updateModelValue(): void {\n  if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n    return;\n  }\n  nextTick(() => {\n    const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n    date.setHours(get(selectedHour));\n    date.setMinutes(get(selectedMinute));\n    date.setSeconds(get(selectedSecond) ?? 0);\n    date.setMilliseconds(get(selectedMillisecond) ?? 0);\n    set(modelValue, date);\n  });\n}\n\nwatch(\n  modelValue,\n  () => {\n    set(selectedHour, getModelHours());\n    set(selectedMinute, getModelMinutes());\n    set(selectedSecond, getModelSeconds());\n    set(selectedMillisecond, getModelMilliseconds());\n  },\n);\n\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Time picker\"\n    :class=\"ui.root({ bordered: !borderless })\"\n  >\n    <div :class=\"ui.digitalDisplay()\">\n      <div :class=\"ui.time()\">\n        <button\n          type=\"button\"\n          data-id=\"hour\"\n          :aria-label=\"`${formatValue(displayHour)} hours`\"\n          :aria-pressed=\"editMode === 'hour'\"\n          :class=\"ui.digit({ active: editMode === 'hour' })\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </button>\n        <div :class=\"ui.separator()\">\n          :\n        </div>\n        <button\n          type=\"button\"\n          data-id=\"minute\"\n          :aria-label=\"`${formatValue(selectedMinute)} minutes`\"\n          :aria-pressed=\"editMode === 'minute'\"\n          :class=\"ui.digit({ active: editMode === 'minute' })\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </button>\n        <div\n          v-if=\"showSecond\"\n          :class=\"ui.separator()\"\n        >\n          :\n        </div>\n        <button\n          v-if=\"showSecond\"\n          type=\"button\"\n          data-id=\"second\"\n          :aria-label=\"`${formatValue(selectedSecond)} seconds`\"\n          :aria-pressed=\"editMode === 'second'\"\n          :class=\"ui.digit({ active: editMode === 'second' })\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </button>\n\n        <div\n          v-if=\"showMillisecond\"\n          :class=\"ui.separator({ class: 'text-lg' })\"\n        >\n          .\n        </div>\n\n        <button\n          v-if=\"showMillisecond\"\n          type=\"button\"\n          data-id=\"millisecond\"\n          :aria-label=\"`${formatValue(selectedMillisecond, 3)} milliseconds`\"\n          :aria-pressed=\"editMode === 'millisecond'\"\n          :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Toggle AM/PM\"\n        :class=\"ui.period()\"\n        @click=\"toggleAmPm()\"\n      >\n        {{ period }}\n      </button>\n    </div>\n\n    <div\n      ref=\"clockFace\"\n      role=\"listbox\"\n      :aria-label=\"`Select ${editMode}`\"\n      :class=\"ui.clockFace()\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"ui.centerDot()\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"ui.clockHand()\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"ui.clockHandCircle()\"\n        :style=\"clockHandCircleStyle\"\n      />\n\n      <div\n        v-for=\"num in clockNumbers\"\n        :key=\"`num-${num}`\"\n        role=\"option\"\n        :aria-selected=\"isSelectedNumber(num)\"\n        :class=\"[\n          ui.clockNumber({ selected: isSelectedNumber(num) }),\n          `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n        ]\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}