@keboola/design 10.1.0 → 11.0.0

package/dist/chunk-JUW2ETEI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/SectionNav/constants.ts","../src/blocks/PageLayout/context.ts","../src/blocks/PageLayout/PageLayout.tsx"],"names":[],"mappings":"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","file":"chunk-JUW2ETEI.js","sourcesContent":["/**\n * Names the container query `SectionNav` reads to pick the tree over the dropdown.\n *\n * It has to sit on an **ancestor**: a container query matches descendants only, so the element that\n * names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose\n * width is what the switch changes (256px in a row, full width in a column), which would oscillate.\n * `PageLayout.Content nav={…}` puts it on the right element for you.\n */\nexport const SECTION_NAV_CONTAINER = 'tw:@container/section-nav';\n","import { createContext, use } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS\n * custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.\n *\n * A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:\n * `PageLayout.Footer` is already documented as usable on its own.\n */\nexport const PageLayoutRootContext = createContext<RefObject<HTMLDivElement | null> | null>(null);\n\nexport const usePageLayoutRoot = () => use(PageLayoutRootContext);\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { SECTION_NAV_CONTAINER } from '../SectionNav/constants';\n\nimport { PageLayoutRootContext, usePageLayoutRoot } from './context';\n\n/**\n * Props for `PageLayout` root. `maxWidth` constrains the content column —\n * `narrow` (976px) for forms, `default` (1280px) for most pages, `wide` (1600px) for dense detail views,\n * `full` for edge-to-edge layouts.\n */\ntype RootProps = ComponentProps<'div'> & {\n  maxWidth?: 'default' | 'narrow' | 'wide' | 'full';\n};\n\nconst maxWidthClass = {\n  narrow: 'tw:max-w-[976px]',\n  default: 'tw:max-w-[1280px]',\n  wide: 'tw:max-w-[1600px]',\n  full: 'tw:max-w-full',\n} as const;\n\nconst Root = ({ ref, className, maxWidth = 'full', children, ...props }: RootProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <PageLayoutRootContext value={rootRef}>\n      <div\n        ref={mergeRefs(ref ?? null, rootRef)}\n        className={cn(\n          'tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto',\n          maxWidthClass[maxWidth],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </PageLayoutRootContext>\n  );\n};\n\nconst Breadcrumbs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div ref={ref} className={cn('tw:w-full', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst STICKY_CHROME_BLEED =\n  'tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background';\n\ntype HeaderProps = ComponentProps<'header'> & {\n  sticky?: boolean;\n};\n\nconst Header = ({ ref, className, sticky = false, children, ...props }: HeaderProps) => {\n  const rootRef = usePageLayoutRoot();\n  const headerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const header = headerRef.current;\n    const root = rootRef?.current;\n\n    if (!sticky || !header || !root || typeof ResizeObserver === 'undefined') return;\n\n    const publish = () => {\n      root.style.setProperty(\n        '--page-header-height',\n        `${Math.round(header.getBoundingClientRect().height)}px`,\n      );\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(header);\n    publish();\n\n    return () => {\n      observer.disconnect();\n      root.style.removeProperty('--page-header-height');\n    };\n  }, [sticky, rootRef]);\n\n  return (\n    <header\n      ref={mergeRefs(ref ?? null, headerRef)}\n      className={cn(\n        'tw:w-full',\n        sticky && ['tw:sticky tw:top-0 tw:z-20 tw:bg-background', STICKY_CHROME_BLEED],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {sticky && (\n        <div\n          aria-hidden\n          className=\"tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]\"\n        />\n      )}\n    </header>\n  );\n};\n\nconst Tabs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:w-full tw:items-center tw:border-b tw:border-border', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ContentProps = ComponentProps<'div'> & {\n  nav?: ReactNode;\n};\n\nconst scrollParent = (from: HTMLElement): HTMLElement | null => {\n  for (let el = from.parentElement; el; el = el.parentElement) {\n    if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;\n  }\n\n  return null;\n};\n\nconst useAvailableHeight = () => {\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = rowRef.current;\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const scroller = scrollParent(row);\n\n    const publish = () => {\n      const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);\n      const room = scroller\n        ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top)\n        : window.innerHeight - top;\n\n      row.style.setProperty('--section-nav-available', `${Math.max(0, Math.round(room))}px`);\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(row);\n    if (scroller) observer.observe(scroller);\n    publish();\n\n    return () => observer.disconnect();\n  }, []);\n\n  return rowRef;\n};\n\nconst Content = ({ ref, className, nav, children, ...props }: ContentProps) => {\n  const rowRef = useAvailableHeight();\n\n  if (!nav) {\n    return (\n      <div\n        ref={ref}\n        className={cn('tw:flex tw:w-full tw:flex-1 tw:flex-col', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col',\n        SECTION_NAV_CONTAINER,\n        className,\n      )}\n      {...props}\n    >\n      <div\n        ref={rowRef}\n        className=\"tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4\"\n      >\n        <div\n          data-slot=\"page-layout-nav\"\n          className=\"tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]\"\n        >\n          {nav}\n        </div>\n        <div\n          data-slot=\"page-layout-content-body\"\n          className=\"tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype FooterProps = ComponentProps<'footer'> & {\n  sticky?: boolean;\n};\n\nconst Footer = ({ ref, className, sticky = false, children, ...props }: FooterProps) => (\n  <footer\n    ref={ref}\n    className={cn(\n      'tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4',\n      sticky && ['tw:sticky tw:bottom-0 tw:z-10', STICKY_CHROME_BLEED],\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </footer>\n);\n\n/**\n * Compound page-chrome block. Provides every kbc-ui page with the same content-column shape:\n * max-width container + vertical rhythm + named slots. The gutter between content and the app\n * frame (sidebar / navbar) is owned by the shell, not by `PageLayout` — so the `Root` adds no\n * outer page padding of its own (`PageLayout.Footer` keeps its own action-bar padding).\n *\n * **When to use:** every new kbc-ui page. Do not roll your own `<div className=\"tw:flex tw:flex-col\">`\n * chrome. Host `PageHeader.Index` / `PageHeader.Detail` inside `PageLayout.Header` for the structured\n * page-header patterns.\n * **When NOT to use:** the left-rail `Sidebar` lives in the app shell outside `PageLayout`. For embedded\n * widgets or modal bodies the layout chrome is the modal / card itself, not `PageLayout`.\n * **Composition:** `PageLayout` is opinionated about chrome only — slots accept any `ReactNode`. Put\n * search / filter pills in `PageToolbar`, never in the header. Form submit bars go in\n * `PageLayout.Footer sticky`.\n *\n * @see RECIPES.md#list-detail — for the index → detail page pattern\n * @see RECIPES.md#section-nav — for the in-page vertical navigation pattern\n */\nexport const PageLayout = Object.assign(Root, {\n  /** Detail-pattern breadcrumb row. Usually composed automatically by `PageHeader.Detail` — slot exists for layouts that don't fit either `PageHeader` variant. */\n  Breadcrumbs,\n  /** Host slot for `PageHeader.Index` / `PageHeader.Detail`, or custom header JSX when neither variant fits. Pass `sticky` to pin it — it then also publishes its measured height as `--page-header-height` on the root, which `Content nav` pins the nav to. */\n  Header,\n  /** Escape hatch for routing-based tab rows. Use `Tabs` / `TabsContent` core components inside, never a raw `<button>`. */\n  Tabs,\n  /** Main content slot. Lists, cards, tables. Pass `nav` (a `SectionNav`) for the two-column in-page-navigation layout; without it the slot is a plain column, exactly as before. */\n  Content,\n  /** Bottom action bar — form submit + cancel. Pass `sticky` for a footer that pins to the viewport. */\n  Footer,\n});\n"]}

package/dist/chunk-K65C7CVE.js

@@ -0,0 +1,127 @@
+import { Minus } from './chunk-RQVK4IYC.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { OTPInput, REGEXP_ONLY_DIGITS, OTPInputContext } from 'input-otp';
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { use } from 'react';
+
+var OtpInputGroup = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ref, className: cn("tw:flex tw:items-center tw:gap-2", className), ...props });
+var OtpInputSeparator = ({
+  ref,
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: cn("tw:flex tw:items-center tw:text-muted-foreground", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(Minus, { className: "tw:size-4" })
+  }
+);
+var slotClassName = [
+  // layout
+  "tw:relative",
+  "tw:flex",
+  "tw:items-center",
+  "tw:justify-center",
+  "tw:font-medium",
+  "tw:tabular-nums",
+  "tw:outline-hidden",
+  "tw:transition",
+  // resting chrome — always-visible input border on a muted fill (matches InputGroup)
+  "tw:border",
+  "tw:border-solid",
+  "tw:border-input",
+  "tw:bg-muted",
+  "tw:text-foreground",
+  "tw:rounded-[var(--radius-lg,0.25rem)]",
+  // focus — the active slot mirrors InputGroup's argo focus ring; z-10 so the ring isn't clipped
+  "tw:data-[active=true]:z-10",
+  "tw:data-[active=true]:border-primary",
+  "tw:data-[active=true]:ring-4",
+  "tw:data-[active=true]:ring-ring/50",
+  // size — from `data-size` on the group/otp container
+  "tw:group-data-[size=sm]/otp:h-8 tw:group-data-[size=sm]/otp:w-8 tw:group-data-[size=sm]/otp:text-sm",
+  "tw:group-data-[size=md]/otp:h-9 tw:group-data-[size=md]/otp:w-9 tw:group-data-[size=md]/otp:text-base",
+  "tw:group-data-[size=lg]/otp:h-10 tw:group-data-[size=lg]/otp:w-10 tw:group-data-[size=lg]/otp:text-lg",
+  // error — from `aria-invalid` on the OTP input (mirrors InputGroup argo error chrome). `!` beats
+  // the base/active border once tailwind-merge dedupes.
+  "tw:group-has-[input[aria-invalid=true]]/otp:!border-destructive",
+  "tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:!border-destructive",
+  "tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:ring-destructive/20"
+];
+var OtpInputSlot = ({
+  ref,
+  index,
+  className,
+  ...props
+}) => {
+  const { slots } = use(OTPInputContext);
+  if (!slots) throw new Error("<OtpInput.Slot> must be rendered inside <OtpInput>.");
+  const slot = slots[index];
+  const char = slot?.char ?? null;
+  const isActive = slot?.isActive ?? false;
+  const hasFakeCaret = slot?.hasFakeCaret ?? false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-active": isActive || void 0,
+      "data-slot-index": index,
+      className: cn(slotClassName, className),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center",
+            children: /* @__PURE__ */ jsx("div", { className: "tw:h-1/2 tw:w-px tw:animate-caret-blink tw:bg-foreground" })
+          }
+        )
+      ]
+    }
+  );
+};
+var Root = ({
+  ref,
+  sizing = "md",
+  pattern = REGEXP_ONLY_DIGITS,
+  containerClassName,
+  className,
+  children,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) => /* @__PURE__ */ jsx("div", { className: "tw:group/otp tw:w-fit", "data-size": sizing, children: /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ...rest,
+    ref,
+    pattern,
+    "aria-invalid": ariaInvalid,
+    containerClassName: cn(
+      "tw:flex tw:items-center tw:gap-2 tw:has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("tw:disabled:cursor-not-allowed", className),
+    children
+  }
+) });
+var OtpInput = Object.assign(Root, {
+  Group: OtpInputGroup,
+  Slot: OtpInputSlot,
+  Separator: OtpInputSeparator
+});
+
+export { OtpInput };
+//# sourceMappingURL=chunk-K65C7CVE.js.map
+//# sourceMappingURL=chunk-K65C7CVE.js.map

package/dist/chunk-K65C7CVE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/OtpInput/OtpInputGroup.tsx","../src/blocks/OtpInput/OtpInputSeparator.tsx","../src/blocks/OtpInput/OtpInputSlot.tsx","../src/blocks/OtpInput/OtpInput.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-K65C7CVE.js","sourcesContent":["import type { ComponentProps, Ref } from 'react';\n\nimport { cn } from '../../utils';\n\ntype GroupProps = ComponentProps<'div'>;\n\nexport const OtpInputGroup = ({\n  ref,\n  className,\n  ...props\n}: GroupProps & { ref?: Ref<HTMLDivElement> }) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props} />\n);\n","import type { ComponentProps, Ref } from 'react';\n\nimport { Minus } from '../../icons';\nimport { cn } from '../../utils';\n\ntype SeparatorProps = ComponentProps<'div'>;\n\nexport const OtpInputSeparator = ({\n  ref,\n  children,\n  className,\n  ...props\n}: SeparatorProps & { ref?: Ref<HTMLDivElement> }) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    aria-orientation=\"vertical\"\n    className={cn('tw:flex tw:items-center tw:text-muted-foreground', className)}\n    {...props}\n  >\n    {children ?? <Minus className=\"tw:size-4\" />}\n  </div>\n);\n","import { type ComponentProps, type Ref, use } from 'react';\nimport { OTPInputContext } from 'input-otp';\n\nimport { cn } from '../../utils';\n\nconst slotClassName = [\n  // layout\n  'tw:relative',\n  'tw:flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:font-medium',\n  'tw:tabular-nums',\n  'tw:outline-hidden',\n  'tw:transition',\n  // resting chrome — always-visible input border on a muted fill (matches InputGroup)\n  'tw:border',\n  'tw:border-solid',\n  'tw:border-input',\n  'tw:bg-muted',\n  'tw:text-foreground',\n  'tw:rounded-[var(--radius-lg,0.25rem)]',\n  // focus — the active slot mirrors InputGroup's argo focus ring; z-10 so the ring isn't clipped\n  'tw:data-[active=true]:z-10',\n  'tw:data-[active=true]:border-primary',\n  'tw:data-[active=true]:ring-4',\n  'tw:data-[active=true]:ring-ring/50',\n  // size — from `data-size` on the group/otp container\n  'tw:group-data-[size=sm]/otp:h-8 tw:group-data-[size=sm]/otp:w-8 tw:group-data-[size=sm]/otp:text-sm',\n  'tw:group-data-[size=md]/otp:h-9 tw:group-data-[size=md]/otp:w-9 tw:group-data-[size=md]/otp:text-base',\n  'tw:group-data-[size=lg]/otp:h-10 tw:group-data-[size=lg]/otp:w-10 tw:group-data-[size=lg]/otp:text-lg',\n  // error — from `aria-invalid` on the OTP input (mirrors InputGroup argo error chrome). `!` beats\n  // the base/active border once tailwind-merge dedupes.\n  'tw:group-has-[input[aria-invalid=true]]/otp:!border-destructive',\n  'tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:!border-destructive',\n  'tw:group-has-[input[aria-invalid=true]]/otp:data-[active=true]:ring-destructive/20',\n];\n\ntype SlotProps = Omit<ComponentProps<'div'>, 'children'> & {\n  index: number;\n};\n\nexport const OtpInputSlot = ({\n  ref,\n  index,\n  className,\n  ...props\n}: SlotProps & { ref?: Ref<HTMLDivElement> }) => {\n  // `input-otp` exposes per-slot char / active / caret state through its render context.\n  const { slots } = use(OTPInputContext);\n  // The context default has no `slots` — a slot rendered outside `<OtpInput>` would otherwise throw\n  // a cryptic \"cannot read properties of undefined\". Fail with an actionable message instead.\n  if (!slots) throw new Error('<OtpInput.Slot> must be rendered inside <OtpInput>.');\n  const slot = slots[index];\n  const char = slot?.char ?? null;\n  const isActive = slot?.isActive ?? false;\n  const hasFakeCaret = slot?.hasFakeCaret ?? false;\n\n  return (\n    <div\n      ref={ref}\n      data-active={isActive || undefined}\n      data-slot-index={index}\n      className={cn(slotClassName, className)}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div\n          aria-hidden=\"true\"\n          className=\"tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center\"\n        >\n          <div className=\"tw:h-1/2 tw:w-px tw:animate-caret-blink tw:bg-foreground\" />\n        </div>\n      )}\n    </div>\n  );\n};\n","import type { ComponentProps, ReactNode, Ref } from 'react';\nimport { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';\n\nimport { cn } from '../../utils';\n\nimport { OtpInputGroup } from './OtpInputGroup';\nimport { OtpInputSeparator } from './OtpInputSeparator';\nimport { OtpInputSlot } from './OtpInputSlot';\n\ntype OtpInputSizing = 'sm' | 'md' | 'lg';\n\ntype OtpElementProps = ComponentProps<typeof OTPInput>;\ntype OtpElementChildrenProps = Omit<\n  Extract<OtpElementProps, { children: ReactNode }>,\n  'containerClassName'\n>;\n\ntype RootOwnProps = {\n  sizing?: OtpInputSizing;\n  containerClassName?: string;\n};\n\ntype RootProps = OtpElementChildrenProps & RootOwnProps;\n\nconst Root = ({\n  ref,\n  sizing = 'md',\n  pattern = REGEXP_ONLY_DIGITS,\n  containerClassName,\n  className,\n  children,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: RootProps & { ref?: Ref<HTMLInputElement> }) => (\n  <div className=\"tw:group/otp tw:w-fit\" data-size={sizing}>\n    <OTPInput\n      {...rest}\n      ref={ref}\n      pattern={pattern}\n      aria-invalid={ariaInvalid}\n      containerClassName={cn(\n        'tw:flex tw:items-center tw:gap-2 tw:has-[:disabled]:opacity-50',\n        containerClassName,\n      )}\n      className={cn('tw:disabled:cursor-not-allowed', className)}\n    >\n      {children}\n    </OTPInput>\n  </div>\n);\n\nexport const OtpInput = Object.assign(Root, {\n  Group: OtpInputGroup,\n  Slot: OtpInputSlot,\n  Separator: OtpInputSeparator,\n});\nexport type { RootProps as OtpInputProps };\n"]}

package/dist/chunk-KDI64MCY.js

@@ -0,0 +1,189 @@
+import { DatePicker } from './chunk-XCYGJDUX.js';
+import { useControllableState } from './chunk-WKAUEL6I.js';
+import { InputGroup } from './chunk-SC275NHZ.js';
+import { X, Calendar } from './chunk-RQVK4IYC.js';
+import { createChangeInputEvent } from './chunk-SWQFYNYG.js';
+import { mergeRefs } from './chunk-3W27OLK5.js';
+import { useRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/blocks/DateInput/helpers.ts
+var formatDate = (date, inputValue) => {
+  if (!date) {
+    return inputValue;
+  }
+  return date.toLocaleDateString();
+};
+var datePartOrder = new Intl.DateTimeFormat().formatToParts(new Date(2e3, 0, 2)).filter(
+  (p) => p.type === "day" || p.type === "month" || p.type === "year"
+).map((p) => p.type);
+var parseDate = (value) => {
+  if (!value.trim()) return null;
+  const nums = value.match(/\d+/g)?.map(Number);
+  if (nums && nums.length >= 3) {
+    const parts = Object.fromEntries(datePartOrder.map((type, i) => [type, nums[i]]));
+    const year = parts.year;
+    const month = parts.month;
+    const day = parts.day;
+    if (year != null && month != null && day != null && month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+      const date = new Date(year, month - 1, day);
+      if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {
+        return date;
+      }
+    }
+  }
+  const isoMatch = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+  if (isoMatch) {
+    const y = Number(isoMatch[1]);
+    const m = Number(isoMatch[2]) - 1;
+    const d = Number(isoMatch[3]);
+    const date = new Date(y, m, d);
+    if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d) {
+      return date;
+    }
+    return null;
+  }
+  const fallback = new Date(value);
+  return isNaN(fallback.getTime()) ? null : fallback;
+};
+var DateInput = ({
+  ref,
+  // group props
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  // own props
+  value,
+  defaultValue,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  onFocus,
+  allowClear = false,
+  disabledDays,
+  endMonth,
+  startMonth,
+  // input props
+  disabled,
+  readOnly,
+  placeholder = "Select a date",
+  ...restInputProps
+}) => {
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const [hasFocus, setHasFocus] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [month, setMonth] = useState(/* @__PURE__ */ new Date());
+  const [currentValue, setCurrentValue] = useControllableState({
+    prop: value,
+    defaultProp: defaultValue ?? null
+  });
+  const canClear = allowClear && !!currentValue && !disabled && !readOnly;
+  const showPicker = !disabled && !readOnly;
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    onChange?.(event);
+    const parsedDate = parseDate(newValue);
+    if (parsedDate !== null || !newValue.trim()) {
+      onValueChange?.(parsedDate);
+    }
+  };
+  const handleFocus = (event) => {
+    const formatted = formatDate(currentValue, "");
+    setInputValue(formatted);
+    setHasFocus(true);
+    onFocus?.(event);
+  };
+  const handleBlur = (event) => {
+    setHasFocus(false);
+    onBlur?.(event);
+    const text = event.target.value;
+    const parsedDate = text === formatDate(currentValue, "") ? currentValue : parseDate(text);
+    onValueBlur?.(parsedDate);
+    setCurrentValue(parsedDate);
+  };
+  const handleDatePickerChange = (newValue) => {
+    const dateValue = newValue ?? null;
+    setCurrentValue(dateValue);
+    onValueChange?.(dateValue);
+    setHasFocus(false);
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    if (!inputRef.current) return;
+    inputRef.current.value = "";
+    setInputValue("");
+    setCurrentValue(null);
+    onValueChange?.(null);
+    onChange?.(createChangeInputEvent(inputRef.current));
+  };
+  const handleOpenChange = (open) => {
+    if (open) {
+      setMonth(currentValue ?? /* @__PURE__ */ new Date());
+    }
+    setIsOpen(open);
+  };
+  const displayValue = hasFocus ? inputValue : formatDate(currentValue, "");
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          InputGroup.Input,
+          {
+            ...restInputProps,
+            ref: mergeRefs(ref ?? null, inputRef),
+            type: "text",
+            value: displayValue,
+            placeholder,
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            disabled,
+            readOnly
+          }
+        ),
+        (canClear || showPicker) && /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
+          canClear && /* @__PURE__ */ jsx(
+            InputGroup.Button,
+            {
+              "aria-label": "Clear date",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+            }
+          ),
+          showPicker && /* @__PURE__ */ jsx(
+            DatePicker,
+            {
+              disabled: disabledDays,
+              endMonth,
+              mode: "single",
+              month,
+              onMonthChange: setMonth,
+              onOpenChange: handleOpenChange,
+              onSelect: handleDatePickerChange,
+              open: isOpen,
+              selected: currentValue ?? void 0,
+              startMonth,
+              children: /* @__PURE__ */ jsx(InputGroup.Button, { "aria-label": "Select Date", children: /* @__PURE__ */ jsx(Calendar, { className: "tw:size-4" }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { DateInput };
+//# sourceMappingURL=chunk-KDI64MCY.js.map
+//# sourceMappingURL=chunk-KDI64MCY.js.map

package/dist/chunk-KDI64MCY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blocks/DateInput/helpers.ts","../src/blocks/DateInput/DateInput.tsx"],"names":[],"mappings":";;;;;;;;;;AAAO,IAAM,UAAA,GAAa,CAAC,IAAA,EAA+B,UAAA,KAA+B;AACvF,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,UAAA;AAAA,EACT;AACA,EAAA,OAAO,KAAK,kBAAA,EAAmB;AACjC,CAAA;AAGA,IAAM,aAAA,GAAgB,IAAI,IAAA,CAAK,cAAA,EAAe,CAC3C,aAAA,CAAc,IAAI,IAAA,CAAK,GAAA,EAAM,CAAA,EAAG,CAAC,CAAC,CAAA,CAClC,MAAA;AAAA,EACC,CAAC,MACC,CAAA,CAAE,IAAA,KAAS,SAAS,CAAA,CAAE,IAAA,KAAS,OAAA,IAAW,CAAA,CAAE,IAAA,KAAS;AACzD,CAAA,CACC,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAI,CAAA;AAEb,IAAM,SAAA,GAAY,CAAC,KAAA,KAA+B;AACvD,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,EAAK,EAAG,OAAO,IAAA;AAG1B,EAAA,MAAM,OAAO,KAAA,CAAM,KAAA,CAAM,MAAM,CAAA,EAAG,IAAI,MAAM,CAAA;AAC5C,EAAA,IAAI,IAAA,IAAQ,IAAA,CAAK,MAAA,IAAU,CAAA,EAAG;AAC5B,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,WAAA,CAAY,aAAA,CAAc,IAAI,CAAC,IAAA,EAAM,CAAA,KAAM,CAAC,IAAA,EAAM,IAAA,CAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AAChF,IAAA,MAAM,OAAO,KAAA,CAAM,IAAA;AACnB,IAAA,MAAM,QAAQ,KAAA,CAAM,KAAA;AACpB,IAAA,MAAM,MAAM,KAAA,CAAM,GAAA;AAElB,IAAA,IACE,IAAA,IAAQ,IAAA,IACR,KAAA,IAAS,IAAA,IACT,GAAA,IAAO,IAAA,IACP,KAAA,IAAS,CAAA,IACT,KAAA,IAAS,EAAA,IACT,GAAA,IAAO,CAAA,IACP,OAAO,EAAA,EACP;AACA,MAAA,MAAM,OAAO,IAAI,IAAA,CAAK,IAAA,EAAM,KAAA,GAAQ,GAAG,GAAG,CAAA;AAC1C,MAAA,IAAI,IAAA,CAAK,WAAA,EAAY,KAAM,IAAA,IAAQ,IAAA,CAAK,QAAA,EAAS,KAAM,KAAA,GAAQ,CAAA,IAAK,IAAA,CAAK,OAAA,EAAQ,KAAM,GAAA,EAAK;AAC1F,QAAA,OAAO,IAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,KAAA,CAAM,+BAA+B,CAAA;AAC5D,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,QAAA,CAAS,CAAC,CAAC,CAAA;AAC5B,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,QAAA,CAAS,CAAC,CAAC,CAAA,GAAI,CAAA;AAChC,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,QAAA,CAAS,CAAC,CAAC,CAAA;AAC5B,IAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,CAAA,EAAG,GAAG,CAAC,CAAA;AAC7B,IAAA,IAAI,IAAA,CAAK,WAAA,EAAY,KAAM,CAAA,IAAK,IAAA,CAAK,QAAA,EAAS,KAAM,CAAA,IAAK,IAAA,CAAK,OAAA,EAAQ,KAAM,CAAA,EAAG;AAC7E,MAAA,OAAO,IAAA;AAAA,IACT;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,QAAA,GAAW,IAAI,IAAA,CAAK,KAAK,CAAA;AAC/B,EAAA,OAAO,KAAA,CAAM,QAAA,CAAS,OAAA,EAAS,IAAI,IAAA,GAAO,QAAA;AAC5C,CAAA;AClBO,IAAM,YAAY,CAAC;AAAA,EACxB,GAAA;AAAA;AAAA,EAGA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA;AAAA,EAGA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,YAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA;AAAA,EAGA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,eAAA;AAAA,EACd,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AAEnD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA;AAC/C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,IAAI,QAAA,iBAAe,IAAI,MAAM,CAAA;AAInD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,oBAAA,CAAkC;AAAA,IACxE,IAAA,EAAM,KAAA;AAAA,IACN,aAAa,YAAA,IAAgB;AAAA,GAC9B,CAAA;AAED,EAAA,MAAM,WAAW,UAAA,IAAc,CAAC,CAAC,YAAA,IAAgB,CAAC,YAAY,CAAC,QAAA;AAC/D,EAAA,MAAM,UAAA,GAAa,CAAC,QAAA,IAAY,CAAC,QAAA;AAEjC,EAAA,MAAM,YAAA,GAAqD,CAAC,KAAA,KAAU;AACpE,IAAA,MAAM,QAAA,GAAW,MAAM,MAAA,CAAO,KAAA;AAC9B,IAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,IAAA,QAAA,GAAW,KAAK,CAAA;AAEhB,IAAA,MAAM,UAAA,GAAa,UAAU,QAAQ,CAAA;AACrC,IAAA,IAAI,UAAA,KAAe,IAAA,IAAQ,CAAC,QAAA,CAAS,MAAK,EAAG;AAC3C,MAAA,aAAA,GAAgB,UAAU,CAAA;AAAA,IAC5B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,YAAA,EAAc,EAAE,CAAA;AAC7C,IAAA,aAAA,CAAc,SAAS,CAAA;AACvB,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAA,OAAA,GAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAkD,CAAC,KAAA,KAAU;AACjE,IAAA,WAAA,CAAY,KAAK,CAAA;AACjB,IAAA,MAAA,GAAS,KAAK,CAAA;AAMd,IAAA,MAAM,IAAA,GAAO,MAAM,MAAA,CAAO,KAAA;AAC1B,IAAA,MAAM,UAAA,GAAa,SAAS,UAAA,CAAW,YAAA,EAAc,EAAE,CAAA,GAAI,YAAA,GAAe,UAAU,IAAI,CAAA;AACxF,IAAA,WAAA,GAAc,UAAU,CAAA;AAExB,IAAA,eAAA,CAAgB,UAAU,CAAA;AAAA,EAC5B,CAAA;AAEA,EAAA,MAAM,sBAAA,GAAyB,CAAC,QAAA,KAAoB;AAClD,IAAA,MAAM,YAAY,QAAA,IAAY,IAAA;AAE9B,IAAA,eAAA,CAAgB,SAAS,CAAA;AACzB,IAAA,aAAA,GAAgB,SAAS,CAAA;AAEzB,IAAA,WAAA,CAAY,KAAK,CAAA;AACjB,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,cAAoD,MAAM;AAC9D,IAAA,IAAI,CAAC,SAAS,OAAA,EAAS;AACvB,IAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AACzB,IAAA,aAAA,CAAc,EAAE,CAAA;AAChB,IAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,IAAA,aAAA,GAAgB,IAAI,CAAA;AACpB,IAAA,QAAA,GAAW,sBAAA,CAAuB,QAAA,CAAS,OAAO,CAAC,CAAA;AAAA,EACrD,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,IAAA,KAAkB;AAC1C,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,QAAA,CAAS,YAAA,oBAAgB,IAAI,IAAA,EAAM,CAAA;AAAA,IACrC;AACA,IAAA,SAAA,CAAU,IAAI,CAAA;AAAA,EAChB,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,QAAA,GAAW,UAAA,GAAa,UAAA,CAAW,cAAc,EAAE,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA,CAAW,KAAA;AAAA,UAAX;AAAA,YACE,GAAG,cAAA;AAAA,YACJ,GAAA,EAAK,SAAA,CAAU,GAAA,IAAO,IAAA,EAAM,QAAQ,CAAA;AAAA,YACpC,IAAA,EAAK,MAAA;AAAA,YACL,KAAA,EAAO,YAAA;AAAA,YACP,WAAA;AAAA,YACA,QAAA,EAAU,YAAA;AAAA,YACV,OAAA,EAAS,WAAA;AAAA,YACT,MAAA,EAAQ,UAAA;AAAA,YACR,QAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QAAA,CAEE,YAAY,UAAA,qBACZ,IAAA,CAAC,WAAW,KAAA,EAAX,EAAiB,OAAM,YAAA,EACrB,QAAA,EAAA;AAAA,UAAA,QAAA,oBACC,GAAA;AAAA,YAAC,UAAA,CAAW,MAAA;AAAA,YAAX;AAAA,cACC,YAAA,EAAW,YAAA;AAAA,cACX,WAAA,EAAa,CAAC,KAAA,KAAU,KAAA,CAAM,cAAA,EAAe;AAAA,cAC7C,OAAA,EAAS,WAAA;AAAA,cAET,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,WAAA,EAAY;AAAA;AAAA,WAC3B;AAAA,UAED,UAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAU,YAAA;AAAA,cACV,QAAA;AAAA,cACA,IAAA,EAAK,QAAA;AAAA,cACL,KAAA;AAAA,cACA,aAAA,EAAe,QAAA;AAAA,cACf,YAAA,EAAc,gBAAA;AAAA,cACd,QAAA,EAAU,sBAAA;AAAA,cACV,IAAA,EAAM,MAAA;AAAA,cACN,UAAU,YAAA,IAAgB,MAAA;AAAA,cAC1B,UAAA;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,MAAA,EAAX,EAAkB,YAAA,EAAW,eAC5B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAa,SAAA,EAAU,WAAA,EAAY,CAAA,EACtC;AAAA;AAAA;AACF,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-KDI64MCY.js","sourcesContent":["export const formatDate = (date: Date | null | undefined, inputValue: string): string => {\n  if (!date) {\n    return inputValue;\n  }\n  return date.toLocaleDateString();\n};\n\n// Detect locale day/month/year order once, matching toLocaleDateString() output\nconst datePartOrder = new Intl.DateTimeFormat()\n  .formatToParts(new Date(2000, 0, 2))\n  .filter(\n    (p): p is { type: 'day' | 'month' | 'year'; value: string } =>\n      p.type === 'day' || p.type === 'month' || p.type === 'year',\n  )\n  .map((p) => p.type);\n\nexport const parseDate = (value: string): Date | null => {\n  if (!value.trim()) return null;\n\n  // Try locale-aware parsing first (matches toLocaleDateString round-trip)\n  const nums = value.match(/\\d+/g)?.map(Number);\n  if (nums && nums.length >= 3) {\n    const parts = Object.fromEntries(datePartOrder.map((type, i) => [type, nums[i]]));\n    const year = parts.year;\n    const month = parts.month;\n    const day = parts.day;\n\n    if (\n      year != null &&\n      month != null &&\n      day != null &&\n      month >= 1 &&\n      month <= 12 &&\n      day >= 1 &&\n      day <= 31\n    ) {\n      const date = new Date(year, month - 1, day);\n      if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {\n        return date;\n      }\n    }\n  }\n\n  // Fallback: detect ISO YYYY-MM-DD and construct as local midnight to avoid UTC offset issues\n  const isoMatch = value.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n  if (isoMatch) {\n    const y = Number(isoMatch[1]);\n    const m = Number(isoMatch[2]) - 1;\n    const d = Number(isoMatch[3]);\n    const date = new Date(y, m, d);\n    if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d) {\n      return date;\n    }\n    return null;\n  }\n\n  const fallback = new Date(value);\n  return isNaN(fallback.getTime()) ? null : fallback;\n};\n","import { useRef, useState } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\nimport type { Matcher } from 'react-day-picker';\n\nimport { DatePicker } from '../../components/DatePicker';\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { Calendar as CalendarIcon, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { formatDate, parseDate } from './helpers';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n  ComponentProps<typeof InputGroup.Input>,\n  'value' | 'defaultValue' | 'type'\n>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: Date | null;\n    defaultValue?: Date | null;\n    onValueChange?: (value: Date | null) => void;\n    onValueBlur?: (value: Date | null) => void;\n    allowClear?: boolean;\n    disabledDays?: Matcher | Matcher[];\n    endMonth?: Date;\n    startMonth?: Date;\n  };\n\nexport const DateInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value,\n  defaultValue,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  onFocus,\n  allowClear = false,\n  disabledDays,\n  endMonth,\n  startMonth,\n\n  // input props\n  disabled,\n  readOnly,\n  placeholder = 'Select a date',\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [inputValue, setInputValue] = useState('');\n  const [hasFocus, setHasFocus] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [month, setMonth] = useState<Date>(new Date());\n\n  // `onValueChange` is fired explicitly per-path below (not through the hook), because commits\n  // happen on blur / picker-select rather than on every keystroke.\n  const [currentValue, setCurrentValue] = useControllableState<Date | null>({\n    prop: value,\n    defaultProp: defaultValue ?? null,\n  });\n\n  const canClear = allowClear && !!currentValue && !disabled && !readOnly;\n  const showPicker = !disabled && !readOnly;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const newValue = event.target.value;\n    setInputValue(newValue);\n    onChange?.(event);\n\n    const parsedDate = parseDate(newValue);\n    if (parsedDate !== null || !newValue.trim()) {\n      onValueChange?.(parsedDate);\n    }\n  };\n\n  const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n    const formatted = formatDate(currentValue, '');\n    setInputValue(formatted);\n    setHasFocus(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    setHasFocus(false);\n    onBlur?.(event);\n\n    // If the field still shows the formatted current value (focused and blurred\n    // without editing), keep it as-is. `formatDate` uses `toLocaleDateString`,\n    // whose output is not reliably parseable by `parseDate` in every locale, so\n    // round-tripping an untouched value could wrongly null it.\n    const text = event.target.value;\n    const parsedDate = text === formatDate(currentValue, '') ? currentValue : parseDate(text);\n    onValueBlur?.(parsedDate);\n\n    setCurrentValue(parsedDate);\n  };\n\n  const handleDatePickerChange = (newValue?: Date) => {\n    const dateValue = newValue ?? null;\n\n    setCurrentValue(dateValue);\n    onValueChange?.(dateValue);\n\n    setHasFocus(false);\n    setIsOpen(false);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setInputValue('');\n    setCurrentValue(null);\n    onValueChange?.(null);\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    if (open) {\n      setMonth(currentValue ?? new Date());\n    }\n    setIsOpen(open);\n  };\n\n  const displayValue = hasFocus ? inputValue : formatDate(currentValue, '');\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Input\n        {...restInputProps}\n        ref={mergeRefs(ref ?? null, inputRef)}\n        type=\"text\"\n        value={displayValue}\n        placeholder={placeholder}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      {(canClear || showPicker) && (\n        <InputGroup.Addon align=\"inline-end\">\n          {canClear && (\n            <InputGroup.Button\n              aria-label=\"Clear date\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={handleClear}\n            >\n              <X className=\"tw:size-4\" />\n            </InputGroup.Button>\n          )}\n          {showPicker && (\n            <DatePicker\n              disabled={disabledDays}\n              endMonth={endMonth}\n              mode=\"single\"\n              month={month}\n              onMonthChange={setMonth}\n              onOpenChange={handleOpenChange}\n              onSelect={handleDatePickerChange}\n              open={isOpen}\n              selected={currentValue ?? undefined}\n              startMonth={startMonth}\n            >\n              <InputGroup.Button aria-label=\"Select Date\">\n                <CalendarIcon className=\"tw:size-4\" />\n              </InputGroup.Button>\n            </DatePicker>\n          )}\n        </InputGroup.Addon>\n      )}\n    </InputGroup>\n  );\n};\n"]}

package/dist/chunk-KN4ASMH5.js

@@ -0,0 +1,160 @@
+import { Truncated } from './chunk-SVPLTL35.js';
+import { Button } from './chunk-IXAYNBOY.js';
+import { ChevronLeft } from './chunk-RQVK4IYC.js';
+import { useArgoDesign } from './chunk-WETKNYZX.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+
+var FullScreenModalBody = ({
+  ref,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ref, className: cn("tw:flex-1 tw:min-h-0 tw:overflow-auto", className), ...props, children });
+var DEFAULT_TITLE_STYLES = "tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden";
+var FullScreenModalHeader = ({
+  title,
+  titleClassName,
+  titleWrapperClassName,
+  defaultTitleStyles = true,
+  isTitleWithIcon = false,
+  children,
+  onClose,
+  className,
+  showPreviousTitle = true,
+  ...props
+}) => {
+  const previousTitle = useMemo(() => {
+    const modals = Array.from(document.querySelectorAll("[data-fullscreen-modal]"));
+    return showPreviousTitle && modals?.length > 0 && modals.at(-1)?.querySelector("[data-modal-title]")?.textContent;
+  }, [showPreviousTitle]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("tw:p-4 tw:flex tw:shrink-0 tw:items-center tw:justify-between", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("tw:flex tw:flex-1 tw:items-center", titleWrapperClassName), children: [
+          previousTitle && onClose && /* @__PURE__ */ jsx(Button, { onClick: onClose, size: "icon", className: "tw:mr-6", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "tw:size-4" }) }),
+          /* @__PURE__ */ jsx("div", { className: "tw:w-full", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("tw:m-0", defaultTitleStyles && DEFAULT_TITLE_STYLES, titleClassName),
+              "data-modal-title": true,
+              children: [
+                previousTitle && onClose && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    className: "tailwindcss-preflight",
+                    "aria-label": `Go back to ${previousTitle}`,
+                    children: /* @__PURE__ */ jsx(
+                      Truncated,
+                      {
+                        text: previousTitle,
+                        className: cn(
+                          "tw:relative tw:top-0 tw:cursor-pointer tw:text-base tw:font-normal tw:text-muted-foreground tw:underline",
+                          "tw:hover:text-foreground tw:hover:no-underline",
+                          isTitleWithIcon && "tw:ml-14"
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn("tw:flex tw:items-center", {
+                      "tw:[&>img]:-mt-6": previousTitle
+                    }),
+                    children: title
+                  }
+                )
+              ]
+            }
+          ) })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+var BODY_LOCK_CLASS = "full-screen-modal-open";
+var FullScreenModalRoot = ({
+  children,
+  className,
+  lockBodyScroll = true,
+  onEscapeKeyDown,
+  onKeyDown,
+  ...props
+}) => {
+  const modalRef = useRef(null);
+  const renderArgo = useArgoDesign();
+  useEffect(() => {
+    const modalElement = modalRef.current;
+    if (lockBodyScroll) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+    return () => {
+      const hasOtherModals = Array.from(document.querySelectorAll("[data-fullscreen-modal]")).some(
+        (el) => el !== modalElement
+      );
+      if (!hasOtherModals) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    };
+  }, [lockBodyScroll]);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      onEscapeKeyDown?.(event);
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: modalRef,
+        role: "dialog",
+        "aria-modal": "true",
+        tabIndex: -1,
+        "data-fullscreen-modal": true,
+        "data-argo": renderArgo,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "tailwindcss-preflight",
+          "tw:fixed",
+          "tw:inset-0",
+          "tw:z-[1039]",
+          "tw:flex",
+          "tw:flex-col",
+          // One scheme-following surface for both chromes. The legacy branch used
+          // to pin `neutral-50`, which the dark scheme cannot reach — and its
+          // light value is within a shade of `background` anyway. `text-foreground`
+          // has to travel with it: the modal is portalled to `document.body`, so it
+          // inherits no app-level foreground and content would sit dark-on-dark.
+          "tw:bg-background",
+          "tw:text-foreground",
+          "tw:focus-visible:outline-hidden",
+          className
+        ),
+        children
+      }
+    ),
+    document.body
+  );
+};
+
+// src/components/FullScreenModal/FullScreenModal.tsx
+var FullScreenModal = Object.assign(FullScreenModalRoot, {
+  Header: FullScreenModalHeader,
+  Body: FullScreenModalBody
+});
+
+export { FullScreenModal, FullScreenModalBody, FullScreenModalHeader };
+//# sourceMappingURL=chunk-KN4ASMH5.js.map
+//# sourceMappingURL=chunk-KN4ASMH5.js.map

package/dist/chunk-KN4ASMH5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FullScreenModal/FullScreenModalBody.tsx","../src/components/FullScreenModal/FullScreenModalHeader.tsx","../src/components/FullScreenModal/FullScreenModalRoot.tsx","../src/components/FullScreenModal/FullScreenModal.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-KN4ASMH5.js","sourcesContent":["import type { HTMLAttributes, Ref } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = HTMLAttributes<HTMLDivElement>;\n\nexport const FullScreenModalBody = ({\n  ref,\n  className,\n  children,\n  ...props\n}: Props & { ref?: Ref<HTMLDivElement> }) => (\n  <div ref={ref} className={cn('tw:flex-1 tw:min-h-0 tw:overflow-auto', className)} {...props}>\n    {children}\n  </div>\n);\n","import { useMemo } from 'react';\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport { ChevronLeft } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Truncated } from '../Truncated';\n\nconst DEFAULT_TITLE_STYLES =\n  'tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden';\n\ntype Props = PropsWithChildren<\n  Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n    title: ReactNode;\n    titleClassName?: string;\n    titleWrapperClassName?: string;\n    defaultTitleStyles?: boolean;\n    isTitleWithIcon?: boolean;\n    onClose?: () => void;\n    showPreviousTitle?: boolean;\n  }\n>;\n\nexport const FullScreenModalHeader = ({\n  title,\n  titleClassName,\n  titleWrapperClassName,\n  defaultTitleStyles = true,\n  isTitleWithIcon = false,\n  children,\n  onClose,\n  className,\n  showPreviousTitle = true,\n  ...props\n}: Props) => {\n  const previousTitle = useMemo(() => {\n    const modals = Array.from(document.querySelectorAll('[data-fullscreen-modal]'));\n    return (\n      showPreviousTitle &&\n      modals?.length > 0 &&\n      modals.at(-1)?.querySelector('[data-modal-title]')?.textContent\n    );\n  }, [showPreviousTitle]);\n\n  return (\n    <div\n      className={cn('tw:p-4 tw:flex tw:shrink-0 tw:items-center tw:justify-between', className)}\n      {...props}\n    >\n      <div className={cn('tw:flex tw:flex-1 tw:items-center', titleWrapperClassName)}>\n        {previousTitle && onClose && (\n          <Button onClick={onClose} size=\"icon\" className=\"tw:mr-6\">\n            <ChevronLeft className=\"tw:size-4\" />\n          </Button>\n        )}\n\n        <div className=\"tw:w-full\">\n          <div\n            className={cn('tw:m-0', defaultTitleStyles && DEFAULT_TITLE_STYLES, titleClassName)}\n            data-modal-title\n          >\n            {previousTitle && onClose && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"tailwindcss-preflight\"\n                aria-label={`Go back to ${previousTitle}`}\n              >\n                <Truncated\n                  text={previousTitle}\n                  className={cn(\n                    'tw:relative tw:top-0 tw:cursor-pointer tw:text-base tw:font-normal tw:text-muted-foreground tw:underline',\n                    'tw:hover:text-foreground tw:hover:no-underline',\n                    isTitleWithIcon && 'tw:ml-14',\n                  )}\n                />\n              </button>\n            )}\n            <div\n              className={cn('tw:flex tw:items-center', {\n                'tw:[&>img]:-mt-6': previousTitle,\n              })}\n            >\n              {title}\n            </div>\n          </div>\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  /** Lock body scroll when modal is open. Default: true */\n  lockBodyScroll?: boolean;\n  /** Callback when ESC key is pressed */\n  onEscapeKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n};\n\nconst BODY_LOCK_CLASS = 'full-screen-modal-open';\n\nexport const FullScreenModalRoot = ({\n  children,\n  className,\n  lockBodyScroll = true,\n  onEscapeKeyDown,\n  onKeyDown,\n  ...props\n}: Props) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const renderArgo = useArgoDesign();\n\n  // Body scroll lock\n  useEffect(() => {\n    const modalElement = modalRef.current;\n\n    if (lockBodyScroll) {\n      document.body.classList.add(BODY_LOCK_CLASS);\n    }\n\n    return () => {\n      // Filter out the current modal because it may still be in the DOM\n      // when lockBodyScroll toggles from true to false (e.g. switching\n      // from full-screen to half-screen mode).\n      const hasOtherModals = Array.from(document.querySelectorAll('[data-fullscreen-modal]')).some(\n        (el) => el !== modalElement,\n      );\n\n      if (!hasOtherModals) {\n        document.body.classList.remove(BODY_LOCK_CLASS);\n      }\n    };\n  }, [lockBodyScroll]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.key === 'Escape' && !event.defaultPrevented) {\n      onEscapeKeyDown?.(event);\n    }\n  };\n\n  return createPortal(\n    <div\n      {...props}\n      ref={modalRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabIndex={-1}\n      data-fullscreen-modal\n      data-argo={renderArgo}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        'tailwindcss-preflight',\n        'tw:fixed',\n        'tw:inset-0',\n        'tw:z-[1039]',\n        'tw:flex',\n        'tw:flex-col',\n        // One scheme-following surface for both chromes. The legacy branch used\n        // to pin `neutral-50`, which the dark scheme cannot reach — and its\n        // light value is within a shade of `background` anyway. `text-foreground`\n        // has to travel with it: the modal is portalled to `document.body`, so it\n        // inherits no app-level foreground and content would sit dark-on-dark.\n        'tw:bg-background',\n        'tw:text-foreground',\n        'tw:focus-visible:outline-hidden',\n        className,\n      )}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n};\n","import { FullScreenModalBody } from './FullScreenModalBody';\nimport { FullScreenModalHeader } from './FullScreenModalHeader';\nimport { FullScreenModalRoot } from './FullScreenModalRoot';\n\nexport const FullScreenModal = Object.assign(FullScreenModalRoot, {\n  Header: FullScreenModalHeader,\n  Body: FullScreenModalBody,\n});\n"]}