@logicplanes/kaeso-ui 0.4.3 → 0.4.5

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["BaseTabs","_Fragment","cn","Fragment$1","Tabs$1","KAESO_TABS_VARIANTS","KAESO_TABS_DEFAULT_VARIANTS","KAESO_PILL_TABS_VARIANTS","KAESO_PILL_TABS_DEFAULT_VARIANTS","Ctx","makeRoot","Root","defaultVariant","variant","value","defaultValue","onValueChange","v","className","name","List","props","useContext","children","Tab","force","disabled","icon","Icon","count","Panel","keepMounted","Tabs","PillTabs"],"sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, type ReactNode } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\n\nexport const KAESO_TABS_VARIANTS = {\n  variant: {\n    underline: { classes: \"\" },\n    pill: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_TABS_DEFAULT_VARIANTS = { variant: \"underline\" } as const;\nexport const KAESO_PILL_TABS_VARIANTS = { variant: KAESO_TABS_VARIANTS.variant } as const;\nexport const KAESO_PILL_TABS_DEFAULT_VARIANTS = { variant: \"pill\" } as const;\ntype Variant = keyof typeof KAESO_TABS_VARIANTS.variant;\n\nconst Ctx = /* @__PURE__ */ createContext<Variant>(\"underline\");\n\nexport interface TabsProps {\n  value?: string | undefined;\n  defaultValue?: string | undefined;\n  onValueChange?: ((value: string) => void) | undefined;\n  variant?: Variant | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}\n\nfunction makeRoot(defaultVariant: Variant, name: string) {\n  const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsProps>(function TabsRoot(\n    { value, defaultValue, onValueChange, variant = defaultVariant, className, children },\n    ref,\n  ) {\n    return (\n      <Ctx.Provider value={variant}>\n        <BaseTabs.Root\n          ref={ref}\n          {...(value !== undefined ? { value } : {})}\n          {...(defaultValue !== undefined ? { defaultValue } : {})}\n          {...(onValueChange ? { onValueChange: (v: unknown) => onValueChange(String(v)) } : {})}\n          className={cn(\"flex min-w-0 flex-col\", className)}\n        >\n          {children}\n        </BaseTabs.Root>\n      </Ctx.Provider>\n    );\n  });\n  Root.displayName = name;\n  return Root;\n}\n\nexport interface TabsListProps {\n  className?: string | undefined;\n  children: ReactNode;\n  \"aria-label\"?: string | undefined;\n}\n\nconst List = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsListProps>(function TabsList({ className, children, ...props }, ref) {\n  const variant = useContext(Ctx);\n  return (\n    <BaseTabs.List\n      ref={ref}\n      className={cn(\n        \"relative flex min-w-0 items-center overflow-x-auto scrollbar-none\",\n        variant === \"underline\" ? \"-mx-12 gap-20 px-12 hairline-b-inset-12\" : \"-m-4 gap-4 p-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {variant === \"underline\" && (\n        <BaseTabs.Indicator className=\"absolute bottom-0 left-0 h-2 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-pill bg-ink indicator-motion\" />\n      )}\n    </BaseTabs.List>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") List.displayName = \"Tabs.List\";\n\nexport interface TabProps {\n  value: string;\n  children: ReactNode;\n  icon?: IconData | undefined;\n  count?: number | undefined;\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nconst Tab = /* @__PURE__ */ forwardRef<HTMLButtonElement, TabProps>(function TabsTab({ value, children, icon, count, disabled, className, \"data-force\": force }, ref) {\n  const variant = useContext(Ctx);\n  return (\n    <BaseTabs.Tab\n      ref={ref}\n      value={value}\n      {...(disabled ? { disabled: true } : {})}\n      {...(force ? { \"data-force\": force } : {})}\n      className={cn(\n        \"relative inline-flex shrink-0 cursor-pointer items-center gap-6 text-body font-medium whitespace-nowrap transition-control tap-target disabled:cursor-not-allowed disabled:text-fg-disabled\",\n        variant === \"underline\"\n          ? \"group/tab h-40 text-fg-secondary outline-none hover:text-fg selected:text-fg\"\n          : \"h-32 rounded-pill px-12 text-fg-secondary hover:bg-fill-1 hover:text-fg active:bg-fill-2 selected:bg-fill-2 selected:text-fg focus-ring\",\n        className,\n      )}\n    >\n      {variant === \"underline\" ? (\n        <span className=\"-mx-8 inline-flex h-28 items-center gap-6 rounded-pill px-8 outline-2 outline-transparent group-focus-visible/tab:outline-focus\">\n          {icon && <Icon icon={icon} size=\"sm\" />}\n          {children}\n          {count !== undefined && <span className=\"text-body font-regular text-fg-secondary tabular\">{count}</span>}\n        </span>\n      ) : (\n        <>\n          {icon && <Icon icon={icon} size=\"sm\" />}\n          {children}\n          {count !== undefined && <span className=\"text-body font-regular text-fg-secondary tabular\">{count}</span>}\n        </>\n      )}\n    </BaseTabs.Tab>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Tab.displayName = \"Tabs.Tab\";\n\nconst Panel = /* @__PURE__ */ forwardRef<HTMLDivElement, { value: string; className?: string | undefined; children: ReactNode; keepMounted?: boolean | undefined }>(\n  function TabsPanel({ value, className, children, keepMounted }, ref) {\n    return (\n      <BaseTabs.Panel ref={ref} value={value} {...(keepMounted ? { keepMounted } : {})} className={cn(\"outline-none focus-ring-inset\", className)}>\n        {children}\n      </BaseTabs.Panel>\n    );\n  },\n);\nif (process.env.NODE_ENV !== \"production\") Panel.displayName = \"Tabs.Panel\";\n\nexport const Tabs = /* @__PURE__ */ Object.assign(/* @__PURE__ */ makeRoot(KAESO_TABS_DEFAULT_VARIANTS.variant, \"Tabs\"), { List, Tab, Panel });\nexport const PillTabs = /* @__PURE__ */ Object.assign(/* @__PURE__ */ makeRoot(KAESO_PILL_TABS_DEFAULT_VARIANTS.variant, \"PillTabs\"), { List, Tab, Panel });\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":["BaseTabs","_Fragment","cn","mergeRefs","observeResize","Fragment$1","Tabs$1","KAESO_TABS_VARIANTS","KAESO_TABS_DEFAULT_VARIANTS","KAESO_PILL_TABS_VARIANTS","KAESO_PILL_TABS_DEFAULT_VARIANTS","Ctx","makeRoot","Root","defaultVariant","variant","value","defaultValue","onValueChange","v","className","name","List","props","useContext","own","useRef","refs","useMemo","ref","useEffect","el","mark","end","stop","children","Tab","force","disabled","icon","Icon","count","Panel","keepMounted","Tabs","PillTabs"],"sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, type ReactNode } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn.js\";\nimport { mergeRefs } from \"../../utils/merge-refs.js\";\nimport { observeResize } from \"../../utils/observe-resize.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\n\nexport const KAESO_TABS_VARIANTS = {\n  variant: {\n    underline: {\n      classes: \"\",\n    },\n    pill: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_TABS_DEFAULT_VARIANTS = { variant: \"underline\" } as const;\nexport const KAESO_PILL_TABS_VARIANTS = { variant: KAESO_TABS_VARIANTS.variant } as const;\nexport const KAESO_PILL_TABS_DEFAULT_VARIANTS = { variant: \"pill\" } as const;\ntype Variant = keyof typeof KAESO_TABS_VARIANTS.variant;\n\nconst Ctx = /* @__PURE__ */ createContext<Variant>(\"underline\");\n\nexport interface TabsProps {\n  value?: string | undefined;\n  defaultValue?: string | undefined;\n  onValueChange?: ((value: string) => void) | undefined;\n  variant?: Variant | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}\n\nfunction makeRoot(defaultVariant: Variant, name: string) {\n  const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsProps>(function TabsRoot(\n    { value, defaultValue, onValueChange, variant = defaultVariant, className, children },\n    ref,\n  ) {\n    return (\n      <Ctx.Provider value={variant}>\n        <BaseTabs.Root\n          ref={ref}\n          {...(value !== undefined ? { value } : {})}\n          {...(defaultValue !== undefined ? { defaultValue } : {})}\n          {...(onValueChange ? { onValueChange: (v: unknown) => onValueChange(String(v)) } : {})}\n          className={cn(\"flex min-w-0 flex-col\", className)}\n        >\n          {children}\n        </BaseTabs.Root>\n      </Ctx.Provider>\n    );\n  });\n  Root.displayName = name;\n  return Root;\n}\n\nexport interface TabsListProps {\n  className?: string | undefined;\n  children: ReactNode;\n  \"aria-label\"?: string | undefined;\n}\n\nconst List = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsListProps>(function TabsList({ className, children, ...props }, ref) {\n  const variant = useContext(Ctx);\n  const own = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(own, ref), [ref]);\n  useEffect(() => {\n    const el = own.current;\n    if (!el) return;\n    const mark = () => {\n      const end = el.scrollWidth - el.clientWidth - Math.abs(el.scrollLeft);\n      el.style.setProperty(\"--scroll-area-overflow-x-start\", `${Math.max(0, Math.abs(el.scrollLeft))}px`);\n      el.style.setProperty(\"--scroll-area-overflow-x-end\", `${Math.max(0, end)}px`);\n    };\n    mark();\n    el.addEventListener(\"scroll\", mark, { passive: true });\n    const stop = observeResize([el, ...el.children], mark);\n    return () => {\n      el.removeEventListener(\"scroll\", mark);\n      stop();\n    };\n  }, []);\n  return (\n    <BaseTabs.List\n      ref={refs}\n      className={cn(\n        \"relative flex min-w-0 items-center overflow-x-auto scroll-px-16 scrollbar-none scroll-fade-x\",\n        variant === \"underline\" ? \"hairline-b-strong\" : \"gap-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {variant === \"underline\" && (\n        <BaseTabs.Indicator className=\"absolute bottom-0 left-0 flex h-2 w-(--active-tab-width) translate-x-(--active-tab-left) px-12 indicator-motion\">\n          <span className=\"h-2 flex-1 rounded-pill bg-ink forced-line\" />\n        </BaseTabs.Indicator>\n      )}\n    </BaseTabs.List>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") List.displayName = \"Tabs.List\";\n\nexport interface TabProps {\n  value: string;\n  children: ReactNode;\n  icon?: IconData | undefined;\n  count?: number | undefined;\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nconst Tab = /* @__PURE__ */ forwardRef<HTMLButtonElement, TabProps>(function TabsTab({ value, children, icon, count, disabled, className, \"data-force\": force }, ref) {\n  const variant = useContext(Ctx);\n  return (\n    <BaseTabs.Tab\n      ref={ref}\n      value={value}\n      {...(disabled ? { disabled: true } : {})}\n      {...(force ? { \"data-force\": force } : {})}\n      className={cn(\n        \"relative inline-flex shrink-0 cursor-pointer items-center gap-6 text-body font-medium whitespace-nowrap text-fg-secondary transition-control tap-target hover:text-fg selected:text-fg disabled:cursor-not-allowed disabled:text-fg-disabled selected:disabled:text-fg-disabled\",\n        variant === \"underline\"\n          ? \"group/tab h-40 outline-none\"\n          : \"h-32 rounded-pill px-12 hover:bg-fill-1 active:bg-fill-2 selected:bg-fill-2 selected:hover:bg-fill-3 selected:active:bg-fill-3 focus-ring-inset\",\n        className,\n      )}\n    >\n      {variant === \"underline\" ? (\n        <span className=\"inline-flex h-28 items-center gap-6 rounded-pill px-12 transition-control focus-ring-inset group-hover/tab:bg-fill-1 group-active/tab:bg-fill-2 group-disabled/tab:bg-transparent group-focus-visible/tab:outline-focus group-focus-visible/tab:outline-solid\">\n          {icon && <Icon icon={icon} size=\"sm\" />}\n          {children}\n          {count !== undefined && <span className=\"text-body font-regular text-fg-secondary tabular\">{count}</span>}\n        </span>\n      ) : (\n        <>\n          {icon && <Icon icon={icon} size=\"sm\" />}\n          {children}\n          {count !== undefined && <span className=\"text-body font-regular text-fg-secondary tabular\">{count}</span>}\n        </>\n      )}\n    </BaseTabs.Tab>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Tab.displayName = \"Tabs.Tab\";\n\nconst Panel = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  { value: string; className?: string | undefined; children: ReactNode; keepMounted?: boolean | undefined; \"data-force\"?: string | undefined }\n>(function TabsPanel({ value, className, children, keepMounted, \"data-force\": force }, ref) {\n  return (\n    <BaseTabs.Panel\n      ref={ref}\n      value={value}\n      {...(keepMounted ? { keepMounted } : {})}\n      {...(force ? { \"data-force\": force } : {})}\n      className={cn(\"outline-none focus-ring-inset\", className)}\n    >\n      {children}\n    </BaseTabs.Panel>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Panel.displayName = \"Tabs.Panel\";\n\nexport const Tabs = /* @__PURE__ */ Object.assign(/* @__PURE__ */ makeRoot(KAESO_TABS_DEFAULT_VARIANTS.variant, \"Tabs\"), { List, Tab, Panel });\nexport const PillTabs = /* @__PURE__ */ Object.assign(/* @__PURE__ */ makeRoot(KAESO_PILL_TABS_DEFAULT_VARIANTS.variant, \"PillTabs\"), { List, Tab, Panel });\n"],"mappings":"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"}

package/dist/components/tag.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as KAESO_TAG_DEFAULT_VARIANTS, n as KAESO_TAG_VARIANTS, r as Pill, i as TAG_DOT, a as Tag } from "../chunks/tag-D_M1s2qS.js";
+export { t as KAESO_TAG_DEFAULT_VARIANTS, n as KAESO_TAG_VARIANTS, r as Pill, i as TAG_DOT, a as Tag } from "../chunks/tag-BGr6lTSV.js";

package/dist/components/text.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as KAESO_TEXT_DEFAULT_VARIANTS, n as KAESO_TEXT_VARIANTS, r as Text } from "../chunks/text-CIXH8rmT.js";
+export { t as KAESO_TEXT_DEFAULT_VARIANTS, n as KAESO_TEXT_VARIANTS, r as Text } from "../chunks/text-DkKdTVUf.js";

package/dist/components/theme-image.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { forwardRef as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/theme-image/theme-image.tsx

package/dist/components/theme-menu.js

@@ -1,8 +1,8 @@
 "use client";
 import { i as e } from "../chunks/context-BELWW79w.js";
 import { a as t } from "../chunks/theme-provider-DJhORMlc.js";
-import { t as n } from "../chunks/icon-button-CrdF_eMG.js";
-import { c as r } from "../chunks/menu-DEmBfdPm.js";
+import { t as n } from "../chunks/icon-button-Dfwpvmav.js";
+import { c as r } from "../chunks/menu-Clvv6ftq.js";
 import { forwardRef as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { ComputerIcon as s, Moon02Icon as c, Sun03Icon as l } from "@hugeicons/core-free-icons";
@@ -29,16 +29,19 @@ var u = { variant: {
 			children: [
 				/* @__PURE__ */ a(r.RadioItem, {
 					value: "system",
+					closeOnClick: !0,
 					icon: s,
 					children: v("themeMenu.system", "System")
 				}),
 				/* @__PURE__ */ a(r.RadioItem, {
 					value: "light",
+					closeOnClick: !0,
 					icon: l,
 					children: v("themeMenu.light", "Light")
 				}),
 				/* @__PURE__ */ a(r.RadioItem, {
 					value: "dark",
+					closeOnClick: !0,
 					icon: c,
 					children: v("themeMenu.dark", "Dark")
 				})

package/dist/components/theme-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-menu.js","names":["__icon_Moon02Icon","__icon_Sun03Icon","__icon_ComputerIcon","useUiText","useTheme","IconButton","Menu","KAESO_THEME_MENU_VARIANTS","KAESO_THEME_MENU_DEFAULT_VARIANTS","ThemeMenu","force","t","resolvedTheme","Moon02Icon","Sun03Icon","theme","setTheme","v","ComputerIcon"],"sources":["../../src/components/theme-menu/theme-menu.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Moon02Icon as __icon_Moon02Icon, Sun03Icon as __icon_Sun03Icon, ComputerIcon as __icon_ComputerIcon } from \"@hugeicons/core-free-icons\";\nimport { useTheme, type ThemePreference } from \"../../theme/theme-provider.js\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { Menu } from \"../menu/menu.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_THEME_MENU_VARIANTS = {\n  variant: {\n    ghost: { classes: \"\" },\n    secondary: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_THEME_MENU_DEFAULT_VARIANTS = { variant: \"ghost\" } as const;\n\nexport interface ThemeMenuProps {\n  variant?: keyof typeof KAESO_THEME_MENU_VARIANTS.variant | undefined;\n  size?: \"sm\" | \"md\" | undefined;\n  side?: \"top\" | \"bottom\" | undefined;\n  align?: \"start\" | \"end\" | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const ThemeMenu = /* @__PURE__ */ forwardRef<HTMLButtonElement, ThemeMenuProps>(function ThemeMenu(\n  { variant = \"ghost\", size = \"sm\", side = \"bottom\", align = \"end\", \"data-force\": force },\n  ref,\n) {\n  const { theme, resolvedTheme, setTheme } = useTheme();\n  const t = useUiText();\n  return (\n    <Menu>\n      <Menu.Trigger>\n        <IconButton\n          ref={ref}\n          icon={resolvedTheme === \"dark\" ? __icon_Moon02Icon : __icon_Sun03Icon}\n          aria-label={t(\"themeMenu.theme\", \"Theme\")}\n          variant={variant}\n          size={size}\n          data-force={force}\n        />\n      </Menu.Trigger>\n      <Menu.Content side={side} align={align} className=\"min-w-180\">\n        <Menu.RadioGroup value={theme} onValueChange={(v) => setTheme(v as ThemePreference)}>\n          <Menu.RadioItem value=\"system\" icon={__icon_ComputerIcon}>\n            {t(\"themeMenu.system\", \"System\")}\n          </Menu.RadioItem>\n          <Menu.RadioItem value=\"light\" icon={__icon_Sun03Icon}>\n            {t(\"themeMenu.light\", \"Light\")}\n          </Menu.RadioItem>\n          <Menu.RadioItem value=\"dark\" icon={__icon_Moon02Icon}>\n            {t(\"themeMenu.dark\", \"Dark\")}\n          </Menu.RadioItem>\n        </Menu.RadioGroup>\n      </Menu.Content>\n    </Menu>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") ThemeMenu.displayName = \"ThemeMenu\";\n"],"mappings":";;;;;;;;;AAOA,IAAaO,IAA4B,EACvC,SAAS;CACP,OAAO,EAAE,SAAS,GAAG;CACrB,WAAW,EAAE,SAAS,GAAG;AAC3B,EACF,GACaC,IAAoC,EAAE,SAAS,QAAQ,GAUvDC,IAA4B,kBAA8C,SACrF,EAAE,aAAU,SAAS,UAAO,MAAM,UAAO,UAAU,WAAQ,OAAO,cAAcC,KAChF,GACA;CACA,IAAM,EAAE,UAAO,kBAAe,gBAAaN,EAAS,GAC9CO,IAAIR,EAAU;CACpB,OACE,kBAACG,GAAD,EAAA,UAAA,CACE,kBAACA,EAAK,SAAN,EAAA,UACE,kBAACD,GAAD;EACO;EACL,MAAMO,MAAkB,SAASZ,IAAoBC;EACrD,cAAYU,EAAE,mBAAmB,OAAO;EAC/B;EACH;EACN,cAAYD;CACb,CAAA,EACW,CAAA,GACd,kBAACJ,EAAK,SAAN;EAAoB;EAAa;EAAO,WAAU;EAChD,UAAA,kBAACA,EAAK,YAAN;GAAiB,OAAOS;GAAO,gBAAgB,MAAMC,EAASC,CAAoB;GAAlF,UAAA;IACE,kBAACX,EAAK,WAAN;KAAgB,OAAM;KAAS,MAAMJ;KAClC,UAAAS,EAAE,oBAAoB,QAAQ;IACjB,CAAA;IAChB,kBAACL,EAAK,WAAN;KAAgB,OAAM;KAAQ,MAAML;KACjC,UAAAU,EAAE,mBAAmB,OAAO;IACf,CAAA;IAChB,kBAACL,EAAK,WAAN;KAAgB,OAAM;KAAO,MAAMN;KAChC,UAAAW,EAAE,kBAAkB,MAAM;IACb,CAAA;GACD;;CACL,CAAA,CACV,EAAA,CAAA;AAEV,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc"}
+{"version":3,"file":"theme-menu.js","names":["__icon_Moon02Icon","__icon_Sun03Icon","__icon_ComputerIcon","useUiText","useTheme","IconButton","Menu","KAESO_THEME_MENU_VARIANTS","KAESO_THEME_MENU_DEFAULT_VARIANTS","ThemeMenu","force","t","resolvedTheme","Moon02Icon","Sun03Icon","theme","setTheme","v","ComputerIcon"],"sources":["../../src/components/theme-menu/theme-menu.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Moon02Icon as __icon_Moon02Icon, Sun03Icon as __icon_Sun03Icon, ComputerIcon as __icon_ComputerIcon } from \"@hugeicons/core-free-icons\";\nimport { useTheme, type ThemePreference } from \"../../theme/theme-provider.js\";\nimport { IconButton } from \"../icon-button/icon-button.js\";\nimport { Menu } from \"../menu/menu.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_THEME_MENU_VARIANTS = {\n  variant: {\n    ghost: { classes: \"\" },\n    secondary: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_THEME_MENU_DEFAULT_VARIANTS = { variant: \"ghost\" } as const;\n\nexport interface ThemeMenuProps {\n  variant?: keyof typeof KAESO_THEME_MENU_VARIANTS.variant | undefined;\n  size?: \"sm\" | \"md\" | undefined;\n  side?: \"top\" | \"bottom\" | undefined;\n  align?: \"start\" | \"end\" | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const ThemeMenu = /* @__PURE__ */ forwardRef<HTMLButtonElement, ThemeMenuProps>(function ThemeMenu(\n  { variant = \"ghost\", size = \"sm\", side = \"bottom\", align = \"end\", \"data-force\": force },\n  ref,\n) {\n  const { theme, resolvedTheme, setTheme } = useTheme();\n  const t = useUiText();\n  return (\n    <Menu>\n      <Menu.Trigger>\n        <IconButton\n          ref={ref}\n          icon={resolvedTheme === \"dark\" ? __icon_Moon02Icon : __icon_Sun03Icon}\n          aria-label={t(\"themeMenu.theme\", \"Theme\")}\n          variant={variant}\n          size={size}\n          data-force={force}\n        />\n      </Menu.Trigger>\n      <Menu.Content side={side} align={align} className=\"min-w-180\">\n        <Menu.RadioGroup value={theme} onValueChange={(v) => setTheme(v as ThemePreference)}>\n          <Menu.RadioItem value=\"system\" closeOnClick icon={__icon_ComputerIcon}>\n            {t(\"themeMenu.system\", \"System\")}\n          </Menu.RadioItem>\n          <Menu.RadioItem value=\"light\" closeOnClick icon={__icon_Sun03Icon}>\n            {t(\"themeMenu.light\", \"Light\")}\n          </Menu.RadioItem>\n          <Menu.RadioItem value=\"dark\" closeOnClick icon={__icon_Moon02Icon}>\n            {t(\"themeMenu.dark\", \"Dark\")}\n          </Menu.RadioItem>\n        </Menu.RadioGroup>\n      </Menu.Content>\n    </Menu>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") ThemeMenu.displayName = \"ThemeMenu\";\n"],"mappings":";;;;;;;;;AAOA,IAAaO,IAA4B,EACvC,SAAS;CACP,OAAO,EAAE,SAAS,GAAG;CACrB,WAAW,EAAE,SAAS,GAAG;AAC3B,EACF,GACaC,IAAoC,EAAE,SAAS,QAAQ,GAUvDC,IAA4B,kBAA8C,SACrF,EAAE,aAAU,SAAS,UAAO,MAAM,UAAO,UAAU,WAAQ,OAAO,cAAcC,KAChF,GACA;CACA,IAAM,EAAE,UAAO,kBAAe,gBAAaN,EAAS,GAC9CO,IAAIR,EAAU;CACpB,OACE,kBAACG,GAAD,EAAA,UAAA,CACE,kBAACA,EAAK,SAAN,EAAA,UACE,kBAACD,GAAD;EACO;EACL,MAAMO,MAAkB,SAASZ,IAAoBC;EACrD,cAAYU,EAAE,mBAAmB,OAAO;EAC/B;EACH;EACN,cAAYD;CACb,CAAA,EACW,CAAA,GACd,kBAACJ,EAAK,SAAN;EAAoB;EAAa;EAAO,WAAU;EAChD,UAAA,kBAACA,EAAK,YAAN;GAAiB,OAAOS;GAAO,gBAAgB,MAAMC,EAASC,CAAoB;GAAlF,UAAA;IACE,kBAACX,EAAK,WAAN;KAAgB,OAAM;KAAS,cAAA;KAAa,MAAMJ;KAC/C,UAAAS,EAAE,oBAAoB,QAAQ;IACjB,CAAA;IAChB,kBAACL,EAAK,WAAN;KAAgB,OAAM;KAAQ,cAAA;KAAa,MAAML;KAC9C,UAAAU,EAAE,mBAAmB,OAAO;IACf,CAAA;IAChB,kBAACL,EAAK,WAAN;KAAgB,OAAM;KAAO,cAAA;KAAa,MAAMN;KAC7C,UAAAW,EAAE,kBAAkB,MAAM;IACb,CAAA;GACD;;CACL,CAAA,CACV,EAAA,CAAA;AAEV,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc"}

package/dist/components/theme-select.js

@@ -1,7 +1,7 @@
 "use client";
 import { i as e } from "../chunks/context-BELWW79w.js";
 import { a as t } from "../chunks/theme-provider-DJhORMlc.js";
-import { r as n } from "../chunks/select-x4XVsdCI.js";
+import { r as n } from "../chunks/select-BqjmQOqx.js";
 import { forwardRef as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/theme-select/theme-select.tsx

package/dist/components/thumbnail.js

@@ -1,41 +1,52 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
-import { forwardRef as t, useState as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
+import { t } from "../chunks/use-hydrating-COtYVRo4.js";
+import { forwardRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/thumbnail/thumbnail.tsx
-var i = { size: {
+var o = { size: {
 	sm: { classes: "size-64" },
 	md: { classes: "size-120" },
 	lg: { classes: "size-160" }
-} }, a = { size: "md" }, o = {
-	sm: "p-4 text-micro",
+} }, s = { size: "md" }, c = {
+	sm: "p-4 text-caption",
 	md: "p-8 text-caption",
 	lg: "p-12 text-caption"
-}, s = /* @__PURE__ */ t(function({ src: t, alt: a, size: s = "md", className: c }, l) {
-	let [u, d] = n(void 0);
-	return /* @__PURE__ */ r("span", {
-		ref: l,
-		className: e("relative inline-flex shrink-0 overflow-hidden rounded-well bg-fill-1", i.size[s].classes, c),
-		children: t === u ? /* @__PURE__ */ r("span", {
+}, l = {
+	sm: "line-clamp-2",
+	md: "line-clamp-3",
+	lg: "line-clamp-3"
+}, u = /* @__PURE__ */ n(function({ src: n, alt: s, size: u = "md", className: d }, f) {
+	let [p, m] = r(void 0), h = t();
+	return /* @__PURE__ */ a("span", {
+		ref: f,
+		className: e("relative inline-flex shrink-0 overflow-hidden rounded-well bg-fill-1", o.size[u].classes, d),
+		children: [n === p ? /* @__PURE__ */ i("span", {
 			role: "img",
-			"aria-label": a,
-			className: e("flex size-full items-center justify-center overflow-hidden text-center text-fg-tertiary wrap-anywhere", o[s]),
-			children: /* @__PURE__ */ r("span", {
-				className: "line-clamp-3",
-				children: a
+			"aria-label": s,
+			className: e("flex size-full items-center justify-center overflow-hidden text-center text-fg-tertiary wrap-anywhere", c[u]),
+			children: /* @__PURE__ */ i("span", {
+				className: l[u],
+				children: s
 			})
-		}) : /* @__PURE__ */ r("img", {
-			src: t,
-			alt: a,
+		}) : /* @__PURE__ */ i("img", {
+			ref: (e) => {
+				h && e?.complete && e.naturalWidth === 0 && m(n);
+			},
+			src: n,
+			alt: s,
 			loading: "lazy",
 			decoding: "async",
 			className: "size-full object-cover",
-			onError: () => d(t)
-		})
+			onError: () => m(n)
+		}), /* @__PURE__ */ i("span", {
+			"aria-hidden": !0,
+			className: "pointer-events-none absolute inset-0 rounded-well shadow-ring"
+		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (s.displayName = "Thumbnail");
+process.env.NODE_ENV !== "production" && (u.displayName = "Thumbnail");
 //#endregion
-export { a as KAESO_THUMBNAIL_DEFAULT_VARIANTS, i as KAESO_THUMBNAIL_VARIANTS, s as Thumbnail };
+export { s as KAESO_THUMBNAIL_DEFAULT_VARIANTS, o as KAESO_THUMBNAIL_VARIANTS, u as Thumbnail };
 
 //# sourceMappingURL=thumbnail.js.map

package/dist/components/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":["cn","KAESO_THUMBNAIL_VARIANTS","KAESO_THUMBNAIL_DEFAULT_VARIANTS","FALLBACK","Thumbnail","failedSrc","setFailedSrc","useState","size","className","src","alt"],"sources":["../../src/components/thumbnail/thumbnail.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport const KAESO_THUMBNAIL_VARIANTS = {\n  size: {\n    sm: { classes: \"size-64\" },\n    md: { classes: \"size-120\" },\n    lg: { classes: \"size-160\" },\n  },\n} as const;\nexport const KAESO_THUMBNAIL_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nconst FALLBACK = { sm: \"p-4 text-micro\", md: \"p-8 text-caption\", lg: \"p-12 text-caption\" } as const;\n\nexport interface ThumbnailProps {\n  src: string;\n  alt: string;\n  size?: keyof typeof KAESO_THUMBNAIL_VARIANTS.size | undefined;\n  className?: string | undefined;\n}\n\nexport const Thumbnail = /* @__PURE__ */ forwardRef<HTMLSpanElement, ThumbnailProps>(function Thumbnail({ src, alt, size = \"md\", className }, ref) {\n  const [failedSrc, setFailedSrc] = useState<string | undefined>(undefined);\n  return (\n    <span\n      ref={ref}\n      className={cn(\"relative inline-flex shrink-0 overflow-hidden rounded-well bg-fill-1\", KAESO_THUMBNAIL_VARIANTS.size[size].classes, className)}\n    >\n      {src !== failedSrc ? (\n        <img src={src} alt={alt} loading=\"lazy\" decoding=\"async\" className=\"size-full object-cover\" onError={() => setFailedSrc(src)} />\n      ) : (\n        <span\n          role=\"img\"\n          aria-label={alt}\n          className={cn(\"flex size-full items-center justify-center overflow-hidden text-center text-fg-tertiary wrap-anywhere\", FALLBACK[size])}\n        >\n          <span className=\"line-clamp-3\">{alt}</span>\n        </span>\n      )}\n    </span>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Thumbnail.displayName = \"Thumbnail\";\n"],"mappings":";;;;;AAGA,IAAaC,IAA2B,EACtC,MAAM;CACJ,IAAI,EAAE,SAAS,UAAU;CACzB,IAAI,EAAE,SAAS,WAAW;CAC1B,IAAI,EAAE,SAAS,WAAW;AAC5B,EACF,GACaC,IAAmC,EAAE,MAAM,KAAK,GAEvDC,IAAW;CAAE,IAAI;CAAkB,IAAI;CAAoB,IAAI;AAAoB,GAS5EC,IAA4B,kBAA4C,SAAmB,EAAE,QAAK,QAAK,UAAO,MAAM,gBAAa,GAAK;CACjJ,IAAM,CAACC,GAAWC,KAAgBC,EAA6B,KAAA,CAAS;CACxE,OACE,kBAAC,QAAD;EACO;EACL,WAAWP,EAAG,wEAAwEC,EAAyB,KAAKO,EAAK,CAAC,SAASC,CAAS;EAE3I,UAAAC,MAAQL,IAGP,kBAAC,QAAD;GACE,MAAK;GACL,cAAYM;GACZ,WAAWX,EAAG,yGAAyGG,EAASK,EAAK;GAErI,UAAA,kBAAC,QAAD;IAAM,WAAU;IAAgB,UAAAG;GAAU,CAAA;EACtC,CAAA,IARN,kBAAC,OAAD;GAAU;GAAU;GAAK,SAAQ;GAAO,UAAS;GAAQ,WAAU;GAAyB,eAAeL,EAAaI,CAAG;EAAI,CAAA;CAU7H,CAAA;AAEV,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc"}
+{"version":3,"file":"thumbnail.js","names":["cn","KAESO_THUMBNAIL_VARIANTS","KAESO_THUMBNAIL_DEFAULT_VARIANTS","FALLBACK","LINES","Thumbnail","failedSrc","setFailedSrc","useState","hydrating","useHydrating","size","className","src","alt","img"],"sources":["../../src/components/thumbnail/thumbnail.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { useHydrating } from \"../../hooks/use-hydrating.js\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport const KAESO_THUMBNAIL_VARIANTS = {\n  size: {\n    sm: { classes: \"size-64\" },\n    md: { classes: \"size-120\" },\n    lg: { classes: \"size-160\" },\n  },\n} as const;\nexport const KAESO_THUMBNAIL_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nconst FALLBACK = { sm: \"p-4 text-caption\", md: \"p-8 text-caption\", lg: \"p-12 text-caption\" } as const;\nconst LINES = { sm: \"line-clamp-2\", md: \"line-clamp-3\", lg: \"line-clamp-3\" } as const;\n\nexport interface ThumbnailProps {\n  src: string;\n  alt: string;\n  size?: keyof typeof KAESO_THUMBNAIL_VARIANTS.size | undefined;\n  className?: string | undefined;\n}\n\nexport const Thumbnail = /* @__PURE__ */ forwardRef<HTMLSpanElement, ThumbnailProps>(function Thumbnail({ src, alt, size = \"md\", className }, ref) {\n  const [failedSrc, setFailedSrc] = useState<string | undefined>(undefined);\n  const hydrating = useHydrating();\n  return (\n    <span\n      ref={ref}\n      className={cn(\"relative inline-flex shrink-0 overflow-hidden rounded-well bg-fill-1\", KAESO_THUMBNAIL_VARIANTS.size[size].classes, className)}\n    >\n      {src !== failedSrc ? (\n        <img\n          ref={(img) => {\n            // A server-rendered image that failed before hydration fired its error event before React listened for it.\n            if (hydrating && img?.complete && img.naturalWidth === 0) setFailedSrc(src);\n          }}\n          src={src}\n          alt={alt}\n          loading=\"lazy\"\n          decoding=\"async\"\n          className=\"size-full object-cover\"\n          onError={() => setFailedSrc(src)}\n        />\n      ) : (\n        <span\n          role=\"img\"\n          aria-label={alt}\n          className={cn(\"flex size-full items-center justify-center overflow-hidden text-center text-fg-tertiary wrap-anywhere\", FALLBACK[size])}\n        >\n          <span className={LINES[size]}>{alt}</span>\n        </span>\n      )}\n      <span aria-hidden className=\"pointer-events-none absolute inset-0 rounded-well shadow-ring\" />\n    </span>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Thumbnail.displayName = \"Thumbnail\";\n"],"mappings":";;;;;;AAIA,IAAaC,IAA2B,EACtC,MAAM;CACJ,IAAI,EAAE,SAAS,UAAU;CACzB,IAAI,EAAE,SAAS,WAAW;CAC1B,IAAI,EAAE,SAAS,WAAW;AAC5B,EACF,GACaC,IAAmC,EAAE,MAAM,KAAK,GAEvDC,IAAW;CAAE,IAAI;CAAoB,IAAI;CAAoB,IAAI;AAAoB,GACrFC,IAAQ;CAAE,IAAI;CAAgB,IAAI;CAAgB,IAAI;AAAe,GAS9DC,IAA4B,kBAA4C,SAAmB,EAAE,QAAK,QAAK,UAAO,MAAM,gBAAa,GAAK;CACjJ,IAAM,CAACC,GAAWC,KAAgBC,EAA6B,KAAA,CAAS,GAClEC,IAAYC,EAAa;CAC/B,OACE,kBAAC,QAAD;EACO;EACL,WAAWV,EAAG,wEAAwEC,EAAyB,KAAKU,EAAK,CAAC,SAASC,CAAS;EAF9I,UAAA,CAIGC,MAAQP,IAcP,kBAAC,QAAD;GACE,MAAK;GACL,cAAYQ;GACZ,WAAWd,EAAG,yGAAyGG,EAASQ,EAAK;GAErI,UAAA,kBAAC,QAAD;IAAM,WAAWP,EAAMO;IAAQ,UAAAG;GAAU,CAAA;EACrC,CAAA,IAnBN,kBAAC,OAAD;GACE,MAAM,MAAQ;IAEZ,AAAIL,KAAaM,GAAK,YAAYA,EAAI,iBAAiB,KAAGR,EAAaM,CAAG;GAC5E;GACK;GACA;GACL,SAAQ;GACR,UAAS;GACT,WAAU;GACV,eAAeN,EAAaM,CAAG;EAChC,CAAA,GAUH,kBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;EAAiE,CAAA,CACzF;;AAEV,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc"}

package/dist/components/timeline.js

@@ -1,58 +1,74 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
-import { forwardRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
+import { i as t } from "../chunks/context-BELWW79w.js";
+import { formatDate as n } from "../format.js";
+import { r } from "../chunks/tooltip-Tkm-urbi.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/timeline/timeline.tsx
-var i = { tone: {
-	neutral: { classes: "bg-line-strong" },
-	success: { classes: "bg-success" },
-	warning: { classes: "bg-warning" },
-	danger: { classes: "bg-danger" },
-	info: { classes: "bg-info" }
-} }, a = { tone: "neutral" }, o = /* @__PURE__ */ t(function({ events: t, className: a }, o) {
-	return /* @__PURE__ */ n("ol", {
-		ref: o,
-		className: e("flex flex-col", a),
-		children: t.map((a, o) => /* @__PURE__ */ r("li", {
+var s = { tone: {
+	neutral: { classes: "bg-line-strong forced-line" },
+	success: { classes: "bg-success data-mark" },
+	warning: { classes: "bg-warning data-mark" },
+	danger: { classes: "bg-danger data-mark" },
+	info: { classes: "bg-info data-mark" }
+} }, c = { tone: "neutral" }, l = /* @__PURE__ */ i(function({ events: i, className: c }, l) {
+	let u = t(), d = {
+		neutral: "",
+		success: u("timeline.success", "Success"),
+		warning: u("timeline.warning", "Warning"),
+		danger: u("timeline.danger", "Critical"),
+		info: u("timeline.info", "Info")
+	};
+	return /* @__PURE__ */ a("ol", {
+		ref: l,
+		className: e("flex flex-col", c),
+		children: i.map((t, c) => /* @__PURE__ */ o("li", {
 			className: "relative flex gap-16 pb-20 last:pb-0",
 			children: [
-				o < t.length - 1 && /* @__PURE__ */ n("span", {
+				c < i.length - 1 && /* @__PURE__ */ a("span", {
 					"aria-hidden": !0,
-					className: "absolute top-20 bottom-0 left-12 w-1 bg-line-subtle"
+					className: "absolute top-20 bottom-0 left-12 w-1 bg-line forced-line"
 				}),
-				/* @__PURE__ */ n("span", {
+				/* @__PURE__ */ a("span", {
 					className: "relative flex h-20 w-24 shrink-0 items-center justify-center",
-					children: a.marker ?? /* @__PURE__ */ n("span", {
+					children: t.marker ?? /* @__PURE__ */ a("span", {
 						"aria-hidden": !0,
-						className: e("h-14 w-3 rounded-pill", i.tone[a.tone ?? "neutral"].classes)
+						className: e("h-14 w-3 rounded-pill", s.tone[t.tone ?? "neutral"].classes)
 					})
 				}),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ o("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-2",
-					children: [/* @__PURE__ */ r("div", {
+					children: [/* @__PURE__ */ o("div", {
 						className: "flex items-baseline justify-between gap-16",
-						children: [/* @__PURE__ */ n("span", {
+						children: [/* @__PURE__ */ o("span", {
 							className: "min-w-0 text-body text-fg",
-							children: a.title
-						}), /* @__PURE__ */ n("time", {
-							...a.datetime ? {
-								dateTime: a.datetime,
-								title: a.datetime
-							} : {},
-							className: "shrink-0 text-small text-fg-tertiary tabular",
-							children: a.time
+							children: [t.tone && t.tone !== "neutral" && /* @__PURE__ */ o("span", {
+								className: "sr-only",
+								children: [d[t.tone], ": "]
+							}), t.title]
+						}), t.datetime ? /* @__PURE__ */ a(r, {
+							content: n(t.datetime, { time: !0 }),
+							children: /* @__PURE__ */ a("time", {
+								dateTime: t.datetime,
+								className: "shrink-0 text-small text-fg-secondary tabular",
+								children: t.time
+							})
+						}) : /* @__PURE__ */ a("time", {
+							className: "shrink-0 text-small text-fg-secondary tabular",
+							children: t.time
 						})]
-					}), a.description && /* @__PURE__ */ n("div", {
+					}), t.description && /* @__PURE__ */ a("div", {
 						className: "text-small text-fg-secondary",
-						children: a.description
+						children: t.description
 					})]
 				})
 			]
-		}, a.id))
+		}, t.id))
 	});
 });
-process.env.NODE_ENV !== "production" && (o.displayName = "Timeline");
+process.env.NODE_ENV !== "production" && (l.displayName = "Timeline");
 //#endregion
-export { a as KAESO_TIMELINE_DEFAULT_VARIANTS, i as KAESO_TIMELINE_VARIANTS, o as Timeline };
+export { c as KAESO_TIMELINE_DEFAULT_VARIANTS, s as KAESO_TIMELINE_VARIANTS, l as Timeline };
 
 //# sourceMappingURL=timeline.js.map

package/dist/components/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","names":["cn","KAESO_TIMELINE_VARIANTS","KAESO_TIMELINE_DEFAULT_VARIANTS","Timeline","className","events","i","e"],"sources":["../../src/components/timeline/timeline.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport const KAESO_TIMELINE_VARIANTS = {\n  tone: {\n    neutral: { classes: \"bg-line-strong\" },\n    success: { classes: \"bg-success\" },\n    warning: { classes: \"bg-warning\" },\n    danger: { classes: \"bg-danger\" },\n    info: { classes: \"bg-info\" },\n  },\n} as const;\nexport const KAESO_TIMELINE_DEFAULT_VARIANTS = { tone: \"neutral\" } as const;\n\nexport interface TimelineEvent {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  time: ReactNode;\n  datetime?: string | undefined;\n  tone?: keyof typeof KAESO_TIMELINE_VARIANTS.tone | undefined;\n  marker?: ReactNode | undefined;\n}\n\nexport const Timeline = /* @__PURE__ */ forwardRef<HTMLOListElement, { events: TimelineEvent[]; className?: string | undefined }>(function Timeline(\n  { events, className },\n  ref,\n) {\n  return (\n    <ol ref={ref} className={cn(\"flex flex-col\", className)}>\n      {events.map((e, i) => (\n        <li key={e.id} className=\"relative flex gap-16 pb-20 last:pb-0\">\n          {i < events.length - 1 && <span aria-hidden className=\"absolute top-20 bottom-0 left-12 w-1 bg-line-subtle\" />}\n          <span className=\"relative flex h-20 w-24 shrink-0 items-center justify-center\">\n            {e.marker ?? <span aria-hidden className={cn(\"h-14 w-3 rounded-pill\", KAESO_TIMELINE_VARIANTS.tone[e.tone ?? \"neutral\"].classes)} />}\n          </span>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <div className=\"flex items-baseline justify-between gap-16\">\n              <span className=\"min-w-0 text-body text-fg\">{e.title}</span>\n              <time {...(e.datetime ? { dateTime: e.datetime, title: e.datetime } : {})} className=\"shrink-0 text-small text-fg-tertiary tabular\">\n                {e.time}\n              </time>\n            </div>\n            {e.description && <div className=\"text-small text-fg-secondary\">{e.description}</div>}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Timeline.displayName = \"Timeline\";\n"],"mappings":";;;;;AAGA,IAAaC,IAA0B,EACrC,MAAM;CACJ,SAAS,EAAE,SAAS,iBAAiB;CACrC,SAAS,EAAE,SAAS,aAAa;CACjC,SAAS,EAAE,SAAS,aAAa;CACjC,QAAQ,EAAE,SAAS,YAAY;CAC/B,MAAM,EAAE,SAAS,UAAU;AAC7B,EACF,GACaC,IAAkC,EAAE,MAAM,UAAU,GAYpDC,IAA2B,kBAA0F,SAChI,EAAE,WAAQ,gBACV,GACA;CACA,OACE,kBAAC,MAAD;EAAS;EAAK,WAAWH,EAAG,iBAAiBI,CAAS;EACnD,UAAAC,EAAO,KAAK,GAAG,MACd,kBAAC,MAAD;GAAe,WAAU;GAAzB,UAAA;IACGC,IAAID,EAAO,SAAS,KAAK,kBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;IAAuD,CAAA;IAC7G,kBAAC,QAAD;KAAM,WAAU;KACb,UAAAE,EAAE,UAAU,kBAAC,QAAD;MAAM,eAAA;MAAY,WAAWP,EAAG,yBAAyBC,EAAwB,KAAKM,EAAE,QAAQ,UAAU,CAAC,OAAO;KAAI,CAAA;IAC/H,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAA6B,UAAAA,EAAE;MAAY,CAAA,GAC3D,kBAAC,QAAD;OAAM,GAAKA,EAAE,WAAW;QAAE,UAAUA,EAAE;QAAU,OAAOA,EAAE;OAAS,IAAI,CAAC;OAAI,WAAU;OAClF,UAAAA,EAAE;MACC,CAAA,CACH;KACJ,CAAA,GAAAA,EAAE,eAAe,kBAAC,OAAD;MAAK,WAAU;MAAgC,UAAAA,EAAE;KAAiB,CAAA,CACjF;;GACH;EAdK,GAAAA,EAAE,EAcP,CACL;CACC,CAAA;AAER,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAS,cAAc"}
+{"version":3,"file":"timeline.js","names":["cn","useUiText","KAESO_TIMELINE_VARIANTS","KAESO_TIMELINE_DEFAULT_VARIANTS","Timeline","t","toneWord","className","events","i","e","Tooltip","formatDate"],"sources":["../../src/components/timeline/timeline.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatDate } from \"../../format/index.js\";\nimport { useUiText } from \"../../i18n/context.js\";\nimport { Tooltip } from \"../tooltip/tooltip.js\";\n\nexport const KAESO_TIMELINE_VARIANTS = {\n  tone: {\n    neutral: { classes: \"bg-line-strong forced-line\" },\n    success: { classes: \"bg-success data-mark\" },\n    warning: { classes: \"bg-warning data-mark\" },\n    danger: { classes: \"bg-danger data-mark\" },\n    info: { classes: \"bg-info data-mark\" },\n  },\n} as const;\nexport const KAESO_TIMELINE_DEFAULT_VARIANTS = { tone: \"neutral\" } as const;\n\nexport interface TimelineEvent {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode | undefined;\n  time: ReactNode;\n  datetime?: string | undefined;\n  tone?: keyof typeof KAESO_TIMELINE_VARIANTS.tone | undefined;\n  marker?: ReactNode | undefined;\n}\n\nexport const Timeline = /* @__PURE__ */ forwardRef<HTMLOListElement, { events: TimelineEvent[]; className?: string | undefined }>(function Timeline(\n  { events, className },\n  ref,\n) {\n  const t = useUiText();\n  const toneWord = {\n    neutral: \"\",\n    success: t(\"timeline.success\", \"Success\"),\n    warning: t(\"timeline.warning\", \"Warning\"),\n    danger: t(\"timeline.danger\", \"Critical\"),\n    info: t(\"timeline.info\", \"Info\"),\n  };\n  return (\n    <ol ref={ref} className={cn(\"flex flex-col\", className)}>\n      {events.map((e, i) => (\n        <li key={e.id} className=\"relative flex gap-16 pb-20 last:pb-0\">\n          {i < events.length - 1 && <span aria-hidden className=\"absolute top-20 bottom-0 left-12 w-1 bg-line forced-line\" />}\n          <span className=\"relative flex h-20 w-24 shrink-0 items-center justify-center\">\n            {e.marker ?? <span aria-hidden className={cn(\"h-14 w-3 rounded-pill\", KAESO_TIMELINE_VARIANTS.tone[e.tone ?? \"neutral\"].classes)} />}\n          </span>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <div className=\"flex items-baseline justify-between gap-16\">\n              <span className=\"min-w-0 text-body text-fg\">\n                {e.tone && e.tone !== \"neutral\" && <span className=\"sr-only\">{toneWord[e.tone]}: </span>}\n                {e.title}\n              </span>\n              {e.datetime ? (\n                <Tooltip content={formatDate(e.datetime, { time: true })}>\n                  <time dateTime={e.datetime} className=\"shrink-0 text-small text-fg-secondary tabular\">\n                    {e.time}\n                  </time>\n                </Tooltip>\n              ) : (\n                <time className=\"shrink-0 text-small text-fg-secondary tabular\">{e.time}</time>\n              )}\n            </div>\n            {e.description && <div className=\"text-small text-fg-secondary\">{e.description}</div>}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Timeline.displayName = \"Timeline\";\n"],"mappings":";;;;;;;;AAMA,IAAaE,IAA0B,EACrC,MAAM;CACJ,SAAS,EAAE,SAAS,6BAA6B;CACjD,SAAS,EAAE,SAAS,uBAAuB;CAC3C,SAAS,EAAE,SAAS,uBAAuB;CAC3C,QAAQ,EAAE,SAAS,sBAAsB;CACzC,MAAM,EAAE,SAAS,oBAAoB;AACvC,EACF,GACaC,IAAkC,EAAE,MAAM,UAAU,GAYpDC,IAA2B,kBAA0F,SAChI,EAAE,WAAQ,gBACV,GACA;CACA,IAAMC,IAAIJ,EAAU,GACdK,IAAW;EACf,SAAS;EACT,SAASD,EAAE,oBAAoB,SAAS;EACxC,SAASA,EAAE,oBAAoB,SAAS;EACxC,QAAQA,EAAE,mBAAmB,UAAU;EACvC,MAAMA,EAAE,iBAAiB,MAAM;CACjC;CACA,OACE,kBAAC,MAAD;EAAS;EAAK,WAAWL,EAAG,iBAAiBO,CAAS;EACnD,UAAAC,EAAO,KAAK,GAAG,MACd,kBAAC,MAAD;GAAe,WAAU;GAAzB,UAAA;IACGC,IAAID,EAAO,SAAS,KAAK,kBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;IAA4D,CAAA;IAClH,kBAAC,QAAD;KAAM,WAAU;KACb,UAAAE,EAAE,UAAU,kBAAC,QAAD;MAAM,eAAA;MAAY,WAAWV,EAAG,yBAAyBE,EAAwB,KAAKQ,EAAE,QAAQ,UAAU,CAAC,OAAO;KAAI,CAAA;IAC/H,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACGA,EAAE,QAAQA,EAAE,SAAS,aAAa,kBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA,CAA2BJ,EAASI,EAAE,OAAM,IAAQ;OACtF,CAAA,GAAAA,EAAE,KACC;MACL,CAAA,GAAAA,EAAE,WACD,kBAACC,GAAD;OAAS,SAASC,EAAWF,EAAE,UAAU,EAAE,MAAM,GAAK,CAAC;OACrD,UAAA,kBAAC,QAAD;QAAM,UAAUA,EAAE;QAAU,WAAU;QACnC,UAAAA,EAAE;OACC,CAAA;MACC,CAAA,IAET,kBAAC,QAAD;OAAM,WAAU;OAAiD,UAAAA,EAAE;MAAW,CAAA,CAE7E;KACJ,CAAA,GAAAA,EAAE,eAAe,kBAAC,OAAD;MAAK,WAAU;MAAgC,UAAAA,EAAE;KAAiB,CAAA,CACjF;;GACH;EAvBK,GAAAA,EAAE,EAuBP,CACL;CACC,CAAA;AAER,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAS,cAAc"}