@clubmed/trident-ui 2.0.0-beta.63 → 2.0.0-beta.65

package/ui/SidebarLayout.js

@@ -18,7 +18,7 @@ function u(e) {
 	let { children: t, icon: n, label: r, ...i } = e;
 	return /* @__PURE__ */ c("button", {
 		...i,
-		className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item",
+		className: "flex whitespace-nowrap items-center text-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill relative group/sidebar-item",
 		children: t
 	});
 }
@@ -45,7 +45,7 @@ var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
 					"aria-hidden": "true",
 					inert: !0,
 					children: /* @__PURE__ */ c("div", {
-						className: t("max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black", "[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20", n ? "[--sidebarItem_clipCircle:100%]" : "[--sidebarItem_clipCircle:0%]", "group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]", !n && "group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80"),
+						className: t("max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black", "[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2", n ? "[--sidebarItem_clipCircle:100%]" : "[--sidebarItem_clipCircle:0%]", "group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]", !n && "group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80"),
 						children: /* @__PURE__ */ c(s, {
 							name: e.icon,
 							className: "w-24"
@@ -124,7 +124,7 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, isCollapsed:
 				b,
 				x,
 				/* @__PURE__ */ c("button", {
-					className: "md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none",
+					className: "md:hidden w-48 h-48 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-full flex items-center justify-center text-white transition-opacity outline-none",
 					"aria-label": g ? "Open the navigation menu" : "Close the navigation menu",
 					onClick: v,
 					children: /* @__PURE__ */ c(r, { isActive: !g })
@@ -135,7 +135,7 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, isCollapsed:
 			children: [/* @__PURE__ */ l("aside", {
 				className: t("z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0", g ? "max-md:-translate-x-full" : "md:pe-24"),
 				children: [/* @__PURE__ */ c("button", {
-					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
+					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
 					onClick: v,
 					"aria-label": g ? "Expand sidebar" : "Collapse sidebar",
 					style: { positionAnchor: `--sidebar-item-${s}` },

package/ui/SidebarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactNode,\n  type SetStateAction,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n}: {\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n  const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n    (value) => {\n      setIsCollapsedState((previousState) => {\n        const nextState = typeof value === 'function' ? value(previousState) : value;\n        if (nextState !== previousState) {\n          onCollapsedChange?.(nextState);\n        }\n        return nextState;\n      });\n    },\n    [onCollapsedChange],\n  );\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, [setIsCollapsed]);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n    isCollapsed: initialCollapsedValue,\n    onCollapsedChange,\n  });\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactNode,\n  type SetStateAction,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n}: {\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n  const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n    (value) => {\n      setIsCollapsedState((previousState) => {\n        const nextState = typeof value === 'function' ? value(previousState) : value;\n        if (nextState !== previousState) {\n          onCollapsedChange?.(nextState);\n        }\n        return nextState;\n      });\n    },\n    [onCollapsedChange],\n  );\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, [setIsCollapsed]);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n    isCollapsed: initialCollapsedValue,\n    onCollapsedChange,\n  });\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/Toggle.js

@@ -25,7 +25,7 @@ var o = ({ className: o, index: s = 0, items: c = [], onClick: l, ...u }) => {
 					className: e(a.className, "rounded-pill relative cursor-pointer overflow-hidden px-20 py-8 transition-colors", {
 						active: s,
 						[t(r)]: s
-					}, "before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl focus-visible:before:bg-pearl"),
+					}, "before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2"),
 					key: a.id,
 					onClick: () => {
 						f(o), l?.(o);

package/ui/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":[],"sources":["../../lib/ui/Toggle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, CSSProperties, FunctionComponent, ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { getComplementaryTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\ninterface Item extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {\n  color: Colors;\n  id: string;\n  label: ReactNode;\n}\n\nexport interface ToggleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'> {\n  index?: number;\n  items: Item[];\n  onClick?: (index: number) => void;\n}\n\nexport const Toggle: FunctionComponent<ToggleProps> = ({\n  className,\n  index = 0,\n  items = [],\n  onClick,\n  ...attrs\n}) => {\n  const [active, setActive] = useState(index);\n\n  useEffect(() => {\n    setActive(index);\n  }, [index]);\n\n  if (!items.length) {\n    return null;\n  }\n\n  const style = {\n    '--toggle-color': `var(--color-${items[active].color || 'black'})`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('rounded-pill text-b3 border p-4 font-bold', className)}\n      role=\"group\"\n    >\n      <div\n        className={clsx(\n          'toggle relative isolate flex',\n          'before:rounded-pill before:absolute before:z-0 before:bg-(--toggle-color) before:transition-all before:duration-300 before:ease-out',\n        )}\n        style={style}\n      >\n        {items.map(({ color, label, ...item }, i) => {\n          const isActive = active === i;\n\n          return (\n            <button\n              {...item}\n              aria-pressed={isActive}\n              className={clsx(\n                item.className,\n                'rounded-pill relative cursor-pointer overflow-hidden px-20 py-8 transition-colors',\n                { active: isActive, [getComplementaryTextColor(color)]: isActive },\n                'before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl focus-visible:before:bg-pearl',\n              )}\n              key={item.id}\n              onClick={() => {\n                setActive(i);\n                onClick?.(i);\n              }}\n              type=\"button\"\n            >\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAoBA,IAAa,KAA0C,EACrD,cACA,WAAQ,GACR,WAAQ,EAAE,EACV,YACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAM;AAM3C,KAJA,QAAgB;AACd,IAAU,EAAM;IACf,CAAC,EAAM,CAAC,EAEP,CAAC,EAAM,OACT,QAAO;CAGT,IAAM,IAAQ,EACZ,kBAAkB,eAAe,EAAM,GAAQ,SAAS,QAAQ,IACjE;AAED,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,6CAA6C,EAAU;EACvE,MAAK;YAEL,kBAAC,OAAD;GACE,WAAW,EACT,gCACA,sIACD;GACM;aAEN,EAAM,KAAK,EAAE,UAAO,UAAO,GAAG,KAAQ,MAAM;IAC3C,IAAM,IAAW,MAAW;AAE5B,WACE,kBAAC,UAAD;KACE,GAAI;KACJ,gBAAc;KACd,WAAW,EACT,EAAK,WACL,qFACA;MAAE,QAAQ;OAAW,EAA0B,EAAM,GAAG;MAAU,EAClE,0HACD;KACD,KAAK,EAAK;KACV,eAAe;AAEb,MADA,EAAU,EAAE,EACZ,IAAU,EAAE;;KAEd,MAAK;KAGE,EADN,EACM;;GAGT,CAAA;EACF,CAAA"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../lib/ui/Toggle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, CSSProperties, FunctionComponent, ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { getComplementaryTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\ninterface Item extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {\n  color: Colors;\n  id: string;\n  label: ReactNode;\n}\n\nexport interface ToggleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'> {\n  index?: number;\n  items: Item[];\n  onClick?: (index: number) => void;\n}\n\nexport const Toggle: FunctionComponent<ToggleProps> = ({\n  className,\n  index = 0,\n  items = [],\n  onClick,\n  ...attrs\n}) => {\n  const [active, setActive] = useState(index);\n\n  useEffect(() => {\n    setActive(index);\n  }, [index]);\n\n  if (!items.length) {\n    return null;\n  }\n\n  const style = {\n    '--toggle-color': `var(--color-${items[active].color || 'black'})`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('rounded-pill text-b3 border p-4 font-bold', className)}\n      role=\"group\"\n    >\n      <div\n        className={clsx(\n          'toggle relative isolate flex',\n          'before:rounded-pill before:absolute before:z-0 before:bg-(--toggle-color) before:transition-all before:duration-300 before:ease-out',\n        )}\n        style={style}\n      >\n        {items.map(({ color, label, ...item }, i) => {\n          const isActive = active === i;\n\n          return (\n            <button\n              {...item}\n              aria-pressed={isActive}\n              className={clsx(\n                item.className,\n                'rounded-pill relative cursor-pointer overflow-hidden px-20 py-8 transition-colors',\n                { active: isActive, [getComplementaryTextColor(color)]: isActive },\n                'before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n              )}\n              key={item.id}\n              onClick={() => {\n                setActive(i);\n                onClick?.(i);\n              }}\n              type=\"button\"\n            >\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAoBA,IAAa,KAA0C,EACrD,cACA,WAAQ,GACR,WAAQ,EAAE,EACV,YACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAM;AAM3C,KAJA,QAAgB;AACd,IAAU,EAAM;IACf,CAAC,EAAM,CAAC,EAEP,CAAC,EAAM,OACT,QAAO;CAGT,IAAM,IAAQ,EACZ,kBAAkB,eAAe,EAAM,GAAQ,SAAS,QAAQ,IACjE;AAED,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,6CAA6C,EAAU;EACvE,MAAK;YAEL,kBAAC,OAAD;GACE,WAAW,EACT,gCACA,sIACD;GACM;aAEN,EAAM,KAAK,EAAE,UAAO,UAAO,GAAG,KAAQ,MAAM;IAC3C,IAAM,IAAW,MAAW;AAE5B,WACE,kBAAC,UAAD;KACE,GAAI;KACJ,gBAAc;KACd,WAAW,EACT,EAAK,WACL,qFACA;MAAE,QAAQ;OAAW,EAA0B,EAAM,GAAG;MAAU,EAClE,mLACD;KACD,KAAK,EAAK;KACV,eAAe;AAEb,MADA,EAAU,EAAE,EACZ,IAAU,EAAE;;KAEd,MAAK;KAGE,EADN,EACM;;GAGT,CAAA;EACF,CAAA"}

package/ui/buttons/Button.type.js

@@ -29,7 +29,7 @@ var t = {
 	primary: "button-medium",
 	secondary: "button-secondary",
 	tertiary: "button-tertiary"
-}, d = (e) => e != null && e in u, f = (e) => d(e) ? u[e] : u.medium, p = ({ color: t, size: n, theme: i, variant: a }) => e("flex", "button", o(i), r(t), l(a), f(n));
+}, d = (e) => e != null && e in u, f = (e) => d(e) ? u[e] : u.medium, p = ({ color: t, size: n, theme: i, variant: a }) => e("flex", "button", "outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", o(i), r(t), l(a), f(n));
 //#endregion
 export { t as BUTTON_COLORS, u as BUTTON_SIZES, i as BUTTON_THEMES, s as BUTTON_VARIANTS, p as getButtonClasses };
 

package/ui/buttons/Button.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}
+{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    'outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,0FACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}

package/ui/forms/CheckboxSelect.js

@@ -64,7 +64,7 @@ function d({ id: d, name: f, label: p, description: m, placeholder: h = "Select.
 				"aria-disabled": H,
 				disabled: H,
 				onClick: M,
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none text-left flex items-center justify-between gap-8", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8", {
 					"bg-white text-black border-middleGrey focus:border-black active:border-black": !H && !B && !V,
 					"bg-pearl border-middleGrey text-grey": H,
 					"border-red bg-white": B,

package/ui/forms/CheckboxSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../../lib/ui/forms/CheckboxSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Checkbox } from './checkboxes/Checkbox';\nimport type { ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormControl } from './FormControl';\nimport { useDropdown } from '../Dropdown';\n\nfunction OptionLabel({ children, selected }: { children: ReactNode; selected: boolean }) {\n  return (\n    <span\n      ref={(el) => {\n        if (el) el.title = el.textContent ?? '';\n      }}\n      className={clsx('text-b3 text-black truncate', { 'font-semibold': selected })}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport interface CheckboxSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface CheckboxSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: CheckboxSelectOption<Value>[];\n}\n\nexport interface CheckboxSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value[];\n  options?: CheckboxSelectOption<Value>[];\n  groups?: CheckboxSelectGroup<Value>[];\n  onChange?: (event: Event, value: Value[]) => void;\n  disabled?: boolean;\n  required?: boolean;\n  hideRequiredStar?: boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  className?: string;\n  'data-testid'?: string;\n  /** Renders the selected values summary in the trigger */\n  renderValue?: (selected: Value[]) => ReactNode;\n}\n\nexport function CheckboxSelect<Value = string>({\n  id: idProp,\n  name: nameProp,\n  label,\n  description,\n  placeholder = 'Select...',\n  value: controlledValue,\n  options,\n  groups,\n  onChange,\n  disabled = false,\n  required = false,\n  hideRequiredStar,\n  validationStatus = 'default',\n  errorMessage,\n  className,\n  'data-testid': dataTestId,\n  renderValue,\n}: CheckboxSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value[]>(controlledValue ?? []);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const toggleOption = (event: Event, val: Value) => {\n    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];\n    setSelected(next);\n    onChange?.(event, next);\n  };\n\n  const allOptions: CheckboxSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const triggerLabel =\n    selected.length === 0 ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>\n        {allOptions\n          .filter((o) => selected.includes(o.value))\n          .map((o) => o.label)\n          .join(', ')}\n      </span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: CheckboxSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Checkbox\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected.includes(option.value)}\n          disabled={disabled}\n          onChange={(event) => toggleOption(event, option.value)}\n        >\n          <OptionLabel selected={selected.includes(option.value)}>{option.label}</OptionLabel>\n        </Checkbox>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"CheckboxSelect\"\n      data-testid={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div ref={containerRef} className=\"relative\">\n        <button\n          type=\"button\"\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={toggle}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none text-left flex items-center justify-between gap-8',\n            {\n              'bg-white text-black border-middleGrey focus:border-black active:border-black':\n                !isDisabled && !isError && !isSuccess,\n              'bg-pearl border-middleGrey text-grey': isDisabled,\n              'border-red bg-white': isError,\n              'border-green bg-white': isSuccess,\n            },\n          )}\n        >\n          <span className=\"truncate flex-1\">{triggerLabel}</span>\n          <span className=\"flex items-center gap-8 shrink-0\">\n            {isError && <Icon name=\"CrossDefault\" width=\"24px\" className=\"text-red\" />}\n            {isSuccess && <Icon name=\"CheckDefault\" width=\"24px\" className=\"text-green\" />}\n            <Icon\n              name=\"ArrowDefaultDown\"\n              width=\"24px\"\n              className={clsx('text-black transition-transform', { 'rotate-180': open })}\n            />\n          </span>\n        </button>\n\n        <div\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-hidden={!open && !isLeaving}\n          className={clsx(\n            'absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          )}\n        >\n          {groups\n            ? groups.map((group, gi) => (\n                <div key={gi} className={clsx({ 'mt-16 first:mt-0': gi > 0 })}>\n                  {group.label && (\n                    <p className=\"text-b4 text-darkGrey font-semibold mb-8 ps-4\">{group.label}</p>\n                  )}\n                  {renderOptions(group.options)}\n                </div>\n              ))\n            : renderOptions(allOptions)}\n        </div>\n      </div>\n    </FormControl>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../../lib/ui/forms/CheckboxSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Checkbox } from './checkboxes/Checkbox';\nimport type { ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormControl } from './FormControl';\nimport { useDropdown } from '../Dropdown';\n\nfunction OptionLabel({ children, selected }: { children: ReactNode; selected: boolean }) {\n  return (\n    <span\n      ref={(el) => {\n        if (el) el.title = el.textContent ?? '';\n      }}\n      className={clsx('text-b3 text-black truncate', { 'font-semibold': selected })}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport interface CheckboxSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface CheckboxSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: CheckboxSelectOption<Value>[];\n}\n\nexport interface CheckboxSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value[];\n  options?: CheckboxSelectOption<Value>[];\n  groups?: CheckboxSelectGroup<Value>[];\n  onChange?: (event: Event, value: Value[]) => void;\n  disabled?: boolean;\n  required?: boolean;\n  hideRequiredStar?: boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  className?: string;\n  'data-testid'?: string;\n  /** Renders the selected values summary in the trigger */\n  renderValue?: (selected: Value[]) => ReactNode;\n}\n\nexport function CheckboxSelect<Value = string>({\n  id: idProp,\n  name: nameProp,\n  label,\n  description,\n  placeholder = 'Select...',\n  value: controlledValue,\n  options,\n  groups,\n  onChange,\n  disabled = false,\n  required = false,\n  hideRequiredStar,\n  validationStatus = 'default',\n  errorMessage,\n  className,\n  'data-testid': dataTestId,\n  renderValue,\n}: CheckboxSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value[]>(controlledValue ?? []);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const toggleOption = (event: Event, val: Value) => {\n    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];\n    setSelected(next);\n    onChange?.(event, next);\n  };\n\n  const allOptions: CheckboxSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const triggerLabel =\n    selected.length === 0 ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>\n        {allOptions\n          .filter((o) => selected.includes(o.value))\n          .map((o) => o.label)\n          .join(', ')}\n      </span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: CheckboxSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Checkbox\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected.includes(option.value)}\n          disabled={disabled}\n          onChange={(event) => toggleOption(event, option.value)}\n        >\n          <OptionLabel selected={selected.includes(option.value)}>{option.label}</OptionLabel>\n        </Checkbox>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"CheckboxSelect\"\n      data-testid={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div ref={containerRef} className=\"relative\">\n        <button\n          type=\"button\"\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={toggle}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8',\n            {\n              'bg-white text-black border-middleGrey focus:border-black active:border-black':\n                !isDisabled && !isError && !isSuccess,\n              'bg-pearl border-middleGrey text-grey': isDisabled,\n              'border-red bg-white': isError,\n              'border-green bg-white': isSuccess,\n            },\n          )}\n        >\n          <span className=\"truncate flex-1\">{triggerLabel}</span>\n          <span className=\"flex items-center gap-8 shrink-0\">\n            {isError && <Icon name=\"CrossDefault\" width=\"24px\" className=\"text-red\" />}\n            {isSuccess && <Icon name=\"CheckDefault\" width=\"24px\" className=\"text-green\" />}\n            <Icon\n              name=\"ArrowDefaultDown\"\n              width=\"24px\"\n              className={clsx('text-black transition-transform', { 'rotate-180': open })}\n            />\n          </span>\n        </button>\n\n        <div\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-hidden={!open && !isLeaving}\n          className={clsx(\n            'absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          )}\n        >\n          {groups\n            ? groups.map((group, gi) => (\n                <div key={gi} className={clsx({ 'mt-16 first:mt-0': gi > 0 })}>\n                  {group.label && (\n                    <p className=\"text-b4 text-darkGrey font-semibold mb-8 ps-4\">{group.label}</p>\n                  )}\n                  {renderOptions(group.options)}\n                </div>\n              ))\n            : renderOptions(allOptions)}\n        </div>\n      </div>\n    </FormControl>\n  );\n}\n"],"mappings":"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"}

package/ui/forms/FloatingLabelTextField.js

@@ -39,7 +39,7 @@ var u = (u) => {
 							"--nbIconsStart": W,
 							"--nbIconsEnd": G
 						},
-						className: e("text-b3 rounded-pill w-full border h-60 font-normal outline-none", "ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
+						className: e("text-b3 rounded-pill w-full border h-60 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", "ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
 							"pt-[26px] pb-[8px]": V && m,
 							"py-12": !(V && m),
 							"border-middleGrey focus:border-black active:border-black": L === "default",
@@ -92,7 +92,7 @@ var u = (u) => {
 									type: w
 								}),
 								(E || U) && (U ? /* @__PURE__ */ c("button", {
-									className: "pointer-events-auto",
+									className: "pointer-events-auto outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 									onClick: (e) => I("", e.nativeEvent),
 									"aria-label": D,
 									type: "reset",

package/ui/forms/FloatingLabelTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelTextField.js","names":[],"sources":["../../../lib/ui/forms/FloatingLabelTextField.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControlError } from './FormControlError';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { type FormControlProps } from './FormControl';\n\nexport interface FloatingLabelTextFieldProps<Value = string> extends FormControlProps<Value> {\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const FloatingLabelTextField = <Value = string,>(\n  props: FloatingLabelTextFieldProps<Value>,\n) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    labelClassName,\n    value: initialValue,\n    validationStatus = 'default',\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    description,\n    icon,\n    iconType,\n    iconFirst = true,\n    hasDropdown = false,\n    clear = '',\n    className,\n    dataTestId,\n    dataName,\n    'data-testid': dataTestIdProp,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const isFloating = focused || (value !== '' && value !== null && value !== undefined);\n  const showError = internalStatus === 'error' && errorMessage;\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  const nbIconsStart = Number(!!icon && iconFirst);\n  const nbIconsEnd =\n    Number(!!icon && !iconFirst) +\n    Number(shouldDisplayClearButton || hasDropdown) +\n    Number(internalStatus === 'error' || internalStatus === 'success');\n\n  return (\n    <div\n      className={clsx('flex flex-col gap-4', className)}\n      data-name={dataName ?? 'FloatingLabelTextField'}\n      data-testid={dataTestIdProp ?? dataTestId}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          ref={inputRef}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as string}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          style={\n            {\n              '--nbIconsStart': nbIconsStart,\n              '--nbIconsEnd': nbIconsEnd,\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border h-60 font-normal outline-none',\n            'ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'pt-[26px] pb-[8px]': isFloating && label,\n              'py-12': !(isFloating && label),\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={label ? undefined : name}\n          aria-invalid={internalStatus === 'error'}\n          aria-describedby={showError ? `${id}-error` : undefined}\n        />\n\n        {label && (\n          <label\n            htmlFor={id}\n            style={\n              {\n                left: `calc(20px + ${nbIconsStart} * 32px)`,\n              } as React.CSSProperties\n            }\n            className={clsx(\n              'pointer-events-none absolute right-0 transition-all duration-150 select-none pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n              {\n                'top-[10px] text-b6 font-semibold': isFloating,\n                'top-1/2 -translate-y-1/2 text-b3 font-normal': !isFloating,\n                'text-red': internalStatus === 'error' && isFloating,\n                'text-middleGrey': internalStatus !== 'error' && isFloating,\n                'text-black': !isFloating && internalStatus !== 'disabled',\n                'text-grey': internalStatus === 'disabled',\n              },\n              labelClassName,\n            )}\n          >\n            {label}\n            {required && !hideRequiredStar && (\n              <span className=\"text-red ms-4\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || shouldDisplayClearButton) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n\n      {description && (\n        <span className=\"text-b4 text-darkGrey font-normal px-20\">{description}</span>\n      )}\n\n      {showError && <FormControlError id={`${id}-error`}>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FloatingLabelTextField.js","names":[],"sources":["../../../lib/ui/forms/FloatingLabelTextField.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControlError } from './FormControlError';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { type FormControlProps } from './FormControl';\n\nexport interface FloatingLabelTextFieldProps<Value = string> extends FormControlProps<Value> {\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const FloatingLabelTextField = <Value = string,>(\n  props: FloatingLabelTextFieldProps<Value>,\n) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    labelClassName,\n    value: initialValue,\n    validationStatus = 'default',\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    description,\n    icon,\n    iconType,\n    iconFirst = true,\n    hasDropdown = false,\n    clear = '',\n    className,\n    dataTestId,\n    dataName,\n    'data-testid': dataTestIdProp,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const isFloating = focused || (value !== '' && value !== null && value !== undefined);\n  const showError = internalStatus === 'error' && errorMessage;\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  const nbIconsStart = Number(!!icon && iconFirst);\n  const nbIconsEnd =\n    Number(!!icon && !iconFirst) +\n    Number(shouldDisplayClearButton || hasDropdown) +\n    Number(internalStatus === 'error' || internalStatus === 'success');\n\n  return (\n    <div\n      className={clsx('flex flex-col gap-4', className)}\n      data-name={dataName ?? 'FloatingLabelTextField'}\n      data-testid={dataTestIdProp ?? dataTestId}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          ref={inputRef}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as string}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          style={\n            {\n              '--nbIconsStart': nbIconsStart,\n              '--nbIconsEnd': nbIconsEnd,\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border h-60 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            'ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'pt-[26px] pb-[8px]': isFloating && label,\n              'py-12': !(isFloating && label),\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={label ? undefined : name}\n          aria-invalid={internalStatus === 'error'}\n          aria-describedby={showError ? `${id}-error` : undefined}\n        />\n\n        {label && (\n          <label\n            htmlFor={id}\n            style={\n              {\n                left: `calc(20px + ${nbIconsStart} * 32px)`,\n              } as React.CSSProperties\n            }\n            className={clsx(\n              'pointer-events-none absolute right-0 transition-all duration-150 select-none pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n              {\n                'top-[10px] text-b6 font-semibold': isFloating,\n                'top-1/2 -translate-y-1/2 text-b3 font-normal': !isFloating,\n                'text-red': internalStatus === 'error' && isFloating,\n                'text-middleGrey': internalStatus !== 'error' && isFloating,\n                'text-black': !isFloating && internalStatus !== 'disabled',\n                'text-grey': internalStatus === 'disabled',\n              },\n              labelClassName,\n            )}\n          >\n            {label}\n            {required && !hideRequiredStar && (\n              <span className=\"text-red ms-4\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || shouldDisplayClearButton) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n\n      {description && (\n        <span className=\"text-b4 text-darkGrey font-normal px-20\">{description}</span>\n      )}\n\n      {showError && <FormControlError id={`${id}-error`}>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/NumberField.js

@@ -67,7 +67,7 @@ var l = (r) => {
 				}),
 				/* @__PURE__ */ a("input", {
 					...T,
-					className: e("text-b2 text-center font-bold outline-none", { "bg-pearl text-grey": i }),
+					className: e("text-b2 text-center font-bold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", { "bg-pearl text-grey": i }),
 					style: s,
 					type: "number",
 					title: w.input,

package/ui/forms/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","names":[],"sources":["../../../lib/ui/forms/NumberField.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport { type ChangeEvent, type MouseEvent, useId } from 'react';\n\nimport { useValue } from '../hooks/useValue';\nimport { Button } from '../buttons/Button';\nimport { FormControl, type FormControlProps } from './FormControl';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n  labels: {\n    increase: string;\n    decrease: string;\n    input: string;\n  };\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    inline = true,\n    labels,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue), e.nativeEvent);\n    }\n  };\n\n  const increase = (event?: Event) => {\n    if (value < max) {\n      setValue(value + 1, event);\n    }\n  };\n\n  const decrease = (event?: Event) => {\n    if (value > min) {\n      setValue(value - 1, event);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    inline,\n    labels,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    inline,\n    labels,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={clsx('flex items-center', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n      inline={inline}\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>) => decrease(e.nativeEvent)}\n          variant=\"circle\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          aria-label={labels.decrease}\n          data-testid={`${dataTestId}-decrease`}\n        />\n        <input\n          {...rest}\n          className={clsx('text-b2 text-center font-bold outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          title={labels.input}\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>) => increase(e.nativeEvent)}\n          variant=\"circle\"\n          aria-label={labels.increase}\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          data-testid={`${dataTestId}-increase`}\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,IAAM,IAAc;CAAE,OAAO;CAAQ,QAAQ;CAAQ;AAErD,SAAgB,EAAe,GAAyB;CACtD,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,OAAO,IAAe,GACtB,aACA,SAAM,GACN,SAAM,IACN,cAAW,IACX,gBAAa,eACb,YAAS,IACT,WACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAA4C;EACtE,cAAc;EACd,WAAW;EACX;EACD,CAAC,EAEI,KAAgB,MAAqC;EACzD,IAAM,IAAW,OAAO,EAAE,OAAO,MAAM;AAEvC,EAAI,KAAY,KAAO,KAAY,KACjC,EAAS,OAAO,EAAS,EAAE,EAAE,YAAY;IAIvC,KAAY,MAAkB;AAClC,EAAI,IAAQ,KACV,EAAS,IAAQ,GAAG,EAAM;IAIxB,KAAY,MAAkB;AAClC,EAAI,IAAQ,KACV,EAAS,IAAQ,GAAG,EAAM;;AAI9B,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,IAAa,KAAe,MAA4B;CACtD,IAAM,EACJ,aACA,QACA,QACA,UACA,gBACA,OACA,eACA,UACA,iBACA,aACA,aACA,iBACA,qBACA,qBACA,aACA,WACA,WACA,GAAG,MACD,EAAe,EAAM;AAEzB,QACE,kBAAC,GAAD;EACM;EACG;EACM;EACb,WAAW,EAAK,qBAAqB,EAAM,UAAU;EACrD,UAAS;EACG;EACE;EACI;EACR;EACA;EACQ;EAClB,QAAO;EACC;YAER,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,UAAU,MAAqC,EAAS,EAAE,YAAY;KACtE,SAAQ;KACR,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,cAAY,EAAO;KACnB,eAAa,GAAG,EAAW;KAC3B,CAAA;IACF,kBAAC,SAAD;KACE,GAAI;KACJ,WAAW,EAAK,8CAA8C,EAC5D,sBAAsB,GACvB,CAAC;KACF,OAAO;KACP,MAAK;KACL,OAAO,EAAO;KACV;KACJ,UAAU;KACA;KACA;KACH;KACF;KACA;KACL,CAAA;IACF,kBAAC,GAAD;KACE,UAAU,MAAqC,EAAS,EAAE,YAAY;KACtE,SAAQ;KACR,cAAY,EAAO;KACnB,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,eAAa,GAAG,EAAW;KAC3B,CAAA;IACE;;EACM,CAAA"}
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../lib/ui/forms/NumberField.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport { type ChangeEvent, type MouseEvent, useId } from 'react';\n\nimport { useValue } from '../hooks/useValue';\nimport { Button } from '../buttons/Button';\nimport { FormControl, type FormControlProps } from './FormControl';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n  labels: {\n    increase: string;\n    decrease: string;\n    input: string;\n  };\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    inline = true,\n    labels,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue), e.nativeEvent);\n    }\n  };\n\n  const increase = (event?: Event) => {\n    if (value < max) {\n      setValue(value + 1, event);\n    }\n  };\n\n  const decrease = (event?: Event) => {\n    if (value > min) {\n      setValue(value - 1, event);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    inline,\n    labels,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    inline,\n    labels,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={clsx('flex items-center', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n      inline={inline}\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>) => decrease(e.nativeEvent)}\n          variant=\"circle\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          aria-label={labels.decrease}\n          data-testid={`${dataTestId}-decrease`}\n        />\n        <input\n          {...rest}\n          className={clsx(\n            'text-b2 text-center font-bold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'bg-pearl text-grey': disabled,\n            },\n          )}\n          style={INPUT_STYLE}\n          type=\"number\"\n          title={labels.input}\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>) => increase(e.nativeEvent)}\n          variant=\"circle\"\n          aria-label={labels.increase}\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          data-testid={`${dataTestId}-increase`}\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,IAAM,IAAc;CAAE,OAAO;CAAQ,QAAQ;CAAQ;AAErD,SAAgB,EAAe,GAAyB;CACtD,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,OAAO,IAAe,GACtB,aACA,SAAM,GACN,SAAM,IACN,cAAW,IACX,gBAAa,eACb,YAAS,IACT,WACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAA4C;EACtE,cAAc;EACd,WAAW;EACX;EACD,CAAC,EAEI,KAAgB,MAAqC;EACzD,IAAM,IAAW,OAAO,EAAE,OAAO,MAAM;AAEvC,EAAI,KAAY,KAAO,KAAY,KACjC,EAAS,OAAO,EAAS,EAAE,EAAE,YAAY;IAIvC,KAAY,MAAkB;AAClC,EAAI,IAAQ,KACV,EAAS,IAAQ,GAAG,EAAM;IAIxB,KAAY,MAAkB;AAClC,EAAI,IAAQ,KACV,EAAS,IAAQ,GAAG,EAAM;;AAI9B,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,IAAa,KAAe,MAA4B;CACtD,IAAM,EACJ,aACA,QACA,QACA,UACA,gBACA,OACA,eACA,UACA,iBACA,aACA,aACA,iBACA,qBACA,qBACA,aACA,WACA,WACA,GAAG,MACD,EAAe,EAAM;AAEzB,QACE,kBAAC,GAAD;EACM;EACG;EACM;EACb,WAAW,EAAK,qBAAqB,EAAM,UAAU;EACrD,UAAS;EACG;EACE;EACI;EACR;EACA;EACQ;EAClB,QAAO;EACC;YAER,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,UAAU,MAAqC,EAAS,EAAE,YAAY;KACtE,SAAQ;KACR,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,cAAY,EAAO;KACnB,eAAa,GAAG,EAAW;KAC3B,CAAA;IACF,kBAAC,SAAD;KACE,GAAI;KACJ,WAAW,EACT,wHACA,EACE,sBAAsB,GACvB,CACF;KACD,OAAO;KACP,MAAK;KACL,OAAO,EAAO;KACV;KACJ,UAAU;KACA;KACA;KACH;KACF;KACA;KACL,CAAA;IACF,kBAAC,GAAD;KACE,UAAU,MAAqC,EAAS,EAAE,YAAY;KACtE,SAAQ;KACR,cAAY,EAAO;KACnB,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,eAAa,GAAG,EAAW;KAC3B,CAAA;IACE;;EACM,CAAA"}

package/ui/forms/PhoneFieldFullInput.js

@@ -70,7 +70,7 @@ var g = (e) => {
 			onChange: E,
 			onKeyDown: T,
 			placeholder: o,
-			className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none", {
+			className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 				"border-middleGrey focus:border-black active:border-black": S === "default",
 				"ps-[52px]": s,
 				"pe-[52px]": S === "error" || S === "success",

package/ui/forms/PhoneFieldFullInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneFieldFullInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldFullInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\nexport interface PhoneFieldFullProps {\n  icon?: IconicNames;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  pattern: string;\n  onChange?: (event: Event, value: PhoneValue) => void;\n}) => {\n  const { externalValue, pattern, onChange } = args;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [value, setValue] = useState('');\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && inputRef.current) {\n      inputRef.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);\n      cursorPositionRef.current = null;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setValue(externalValue.full || '');\n    }\n  }, [externalValue]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') return;\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n      if (cursorPosition !== selectionEnd) return;\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n      const targetChar = e.key === 'Backspace' ? value[cursorPosition - 1] : value[cursorPosition];\n      if (!targetChar || /\\d/.test(targetChar)) return;\n\n      e.preventDefault();\n      const allDigits = stripLiteralPrefix(extractDigits(value), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(value.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) return;\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) return;\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n      setValue(formatted);\n      onChange?.(e.nativeEvent, { full: formatted, raw: extractDigits(formatted) });\n    },\n    [pattern, value, onChange],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setValue(formattedValue.formatted);\n\n      onChange?.(e.nativeEvent, {\n        full: formattedValue.formatted,\n        raw: extractDigits(formattedValue.formatted),\n      });\n    },\n    [pattern, onChange],\n  );\n\n  return { inputRef, value, onKeyDown, onInputChange };\n};\n\nexport interface PhoneFieldFullInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  icon?: PhoneFieldFullProps['icon'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldFullInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  placeholder = '',\n  icon,\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...inputProps\n}: PhoneFieldFullInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { inputRef, value, onKeyDown, onInputChange } = usePhoneField({\n    externalValue,\n    pattern,\n    onChange,\n  });\n\n  return (\n    <div className=\"relative\">\n      <input\n        {...(inputProps as any)}\n        ref={inputRef}\n        id={resolvedId}\n        name={resolvedName}\n        type=\"tel\"\n        disabled={disabled}\n        required={required}\n        value={value}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        className={clsx(\n          'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none',\n          {\n            'border-middleGrey focus:border-black active:border-black':\n              internalStatus === 'default',\n            'ps-[52px]': icon,\n            'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n            'bg-white text-black': internalStatus !== 'disabled',\n            'bg-pearl border-middleGrey': internalStatus === 'disabled',\n            'border-red': internalStatus === 'error',\n            'border-green': internalStatus === 'success',\n          },\n        )}\n        aria-label={resolvedName}\n      />\n      <div\n        className={clsx(\n          'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          {\n            'text-grey': internalStatus === 'disabled',\n            'text-red': internalStatus === 'error',\n            'text-green': internalStatus === 'success',\n          },\n        )}\n      >\n        {icon && <Icon name={icon} width=\"24px\" />}\n        <span className=\"ms-auto flex gap-x-8\">\n          {internalStatus === 'error' && <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />}\n          {internalStatus === 'success' && (\n            <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n          )}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AA4BA,IAAM,KAAiB,MAIjB;CACJ,IAAM,EAAE,kBAAe,YAAS,gBAAa,GACvC,IAAW,EAAyB,KAAK,EACzC,IAAoB,EAAsB,KAAK,EAC/C,CAAC,GAAO,KAAY,EAAS,GAAG;AA8EtC,QA5EA,QAAgB;AACd,EAAI,EAAkB,YAAY,QAAQ,EAAS,YACjD,EAAS,QAAQ,kBAAkB,EAAkB,SAAS,EAAkB,QAAQ,EACxF,EAAkB,UAAU;IAE7B,CAAC,EAAM,CAAC,EAEX,QAAgB;AACd,EAAI,KAAiB,OAAO,KAAkB,YAAY,UAAU,KAClE,EAAS,EAAc,QAAQ,GAAG;IAEnC,CAAC,EAAc,CAAC,EAiEZ;EAAE;EAAU;EAAO,WA/DR,GACf,MAAuC;AACtC,OAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,SAAU;GACjD,IAAM,IAAiB,EAAE,cAAc,kBAAkB;AAEzD,OAAI,OADiB,EAAE,cAAc,gBAAgB,GAChB;GAErC,IAAM,EAAE,2BAAwB,EAAqB,EAAQ,EACvD,IAAa,EAAE,QAAQ,cAAc,EAAM,IAAiB,KAAK,EAAM;AAC7E,OAAI,CAAC,KAAc,KAAK,KAAK,EAAW,CAAE;AAE1C,KAAE,gBAAgB;GAClB,IAAM,IAAY,EAAmB,EAAc,EAAM,EAAE,EAAoB,EACzE,IAAqB,EACzB,EAAc,EAAM,UAAU,GAAG,EAAe,CAAC,EACjD,EACD,CAAC,QAEE,GACA;AACJ,OAAI,EAAE,QAAQ,aAAa;AACzB,QAAI,MAAuB,EAAG;AAG9B,IAFA,IACE,EAAU,MAAM,GAAG,IAAqB,EAAE,GAAG,EAAU,MAAM,EAAmB,EAClF,IAAqB,IAAqB;UACrC;AACL,QAAI,KAAsB,EAAU,OAAQ;AAG5C,IAFA,IACE,EAAU,MAAM,GAAG,EAAmB,GAAG,EAAU,MAAM,IAAqB,EAAE,EAClF,IAAqB;;GAGvB,IAAM,IAAY,EAAkB,GAAW,EAAQ;AAOvD,GANA,EAAkB,UAAU,EAC1B,GACA,GACA,EACD,EACD,EAAS,EAAU,EACnB,IAAW,EAAE,aAAa;IAAE,MAAM;IAAW,KAAK,EAAc,EAAU;IAAE,CAAC;KAE/E;GAAC;GAAS;GAAO;GAAS,CAC3B;EAqBoC,eAnBf,GACnB,MAAqC;GACpC,IAAM,IAAiB,EACrB,EAAE,OAAO,OACT,GACA,EAAE,OAAO,kBAAkB,EAC5B;AACI,SACL,EAAkB,UAAU,EAAe,YAC3C,EAAS,EAAe,UAAU,EAElC,IAAW,EAAE,aAAa;IACxB,MAAM,EAAe;IACrB,KAAK,EAAc,EAAe,UAAU;IAC7C,CAAC;KAEJ,CAAC,GAAS,EAAS,CACpB;EAEmD;GAazC,KAAuB,EAClC,OACA,SACA,OAAO,GACP,aAAU,kBACV,iBAAc,IACd,SACA,aACA,cAAW,IACX,cAAW,IACX,sBAAmB,WACnB,aACA,GAAG,QAC2B;CAC9B,IAAM,IAAa,GAAO,EACpB,IAAa,KAAM,GACnB,IAAe,KAAQ,GAEvB,IAAiB,EAAkB;EAAE,YAAY;EAAU;EAAkB,CAAC,EAC9E,EAAE,aAAU,UAAO,cAAW,qBAAkB,EAAc;EAClE;EACA;EACA;EACD,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,SAAD;GACE,GAAK;GACL,KAAK;GACL,IAAI;GACJ,MAAM;GACN,MAAK;GACK;GACA;GACH;GACP,UAAU;GACC;GACE;GACb,WAAW,EACT,2FACA;IACE,4DACE,MAAmB;IACrB,aAAa;IACb,aAAa,MAAmB,WAAW,MAAmB;IAC9D,uBAAuB,MAAmB;IAC1C,8BAA8B,MAAmB;IACjD,cAAc,MAAmB;IACjC,gBAAgB,MAAmB;IACpC,CACF;GACD,cAAY;GACZ,CAAA,EACF,kBAAC,OAAD;GACE,WAAW,EACT,sFACA;IACE,aAAa,MAAmB;IAChC,YAAY,MAAmB;IAC/B,cAAc,MAAmB;IAClC,CACF;aARH,CAUG,KAAQ,kBAAC,GAAD;IAAM,MAAM;IAAM,OAAM;IAAS,CAAA,EAC1C,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,MAAmB,WAAW,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAO,MAAM;KAAY,CAAA,EACvF,MAAmB,aAClB,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAO,MAAM;KAAY,CAAA,CAEtD;MACH;KACF"}
+{"version":3,"file":"PhoneFieldFullInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldFullInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\nexport interface PhoneFieldFullProps {\n  icon?: IconicNames;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  pattern: string;\n  onChange?: (event: Event, value: PhoneValue) => void;\n}) => {\n  const { externalValue, pattern, onChange } = args;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [value, setValue] = useState('');\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && inputRef.current) {\n      inputRef.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);\n      cursorPositionRef.current = null;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setValue(externalValue.full || '');\n    }\n  }, [externalValue]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') return;\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n      if (cursorPosition !== selectionEnd) return;\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n      const targetChar = e.key === 'Backspace' ? value[cursorPosition - 1] : value[cursorPosition];\n      if (!targetChar || /\\d/.test(targetChar)) return;\n\n      e.preventDefault();\n      const allDigits = stripLiteralPrefix(extractDigits(value), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(value.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) return;\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) return;\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n      setValue(formatted);\n      onChange?.(e.nativeEvent, { full: formatted, raw: extractDigits(formatted) });\n    },\n    [pattern, value, onChange],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setValue(formattedValue.formatted);\n\n      onChange?.(e.nativeEvent, {\n        full: formattedValue.formatted,\n        raw: extractDigits(formattedValue.formatted),\n      });\n    },\n    [pattern, onChange],\n  );\n\n  return { inputRef, value, onKeyDown, onInputChange };\n};\n\nexport interface PhoneFieldFullInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  icon?: PhoneFieldFullProps['icon'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldFullInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  placeholder = '',\n  icon,\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...inputProps\n}: PhoneFieldFullInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { inputRef, value, onKeyDown, onInputChange } = usePhoneField({\n    externalValue,\n    pattern,\n    onChange,\n  });\n\n  return (\n    <div className=\"relative\">\n      <input\n        {...(inputProps as any)}\n        ref={inputRef}\n        id={resolvedId}\n        name={resolvedName}\n        type=\"tel\"\n        disabled={disabled}\n        required={required}\n        value={value}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        className={clsx(\n          'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n          {\n            'border-middleGrey focus:border-black active:border-black':\n              internalStatus === 'default',\n            'ps-[52px]': icon,\n            'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n            'bg-white text-black': internalStatus !== 'disabled',\n            'bg-pearl border-middleGrey': internalStatus === 'disabled',\n            'border-red': internalStatus === 'error',\n            'border-green': internalStatus === 'success',\n          },\n        )}\n        aria-label={resolvedName}\n      />\n      <div\n        className={clsx(\n          'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n          {\n            'text-grey': internalStatus === 'disabled',\n            'text-red': internalStatus === 'error',\n            'text-green': internalStatus === 'success',\n          },\n        )}\n      >\n        {icon && <Icon name={icon} width=\"24px\" />}\n        <span className=\"ms-auto flex gap-x-8\">\n          {internalStatus === 'error' && <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />}\n          {internalStatus === 'success' && (\n            <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n          )}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/PhoneFieldSplitInput.js

@@ -100,7 +100,7 @@ var _ = (e) => {
 				disabled: f,
 				value: E,
 				onChange: (e) => A(e.nativeEvent, e.target.value),
-				className: "opacity-0 absolute inset-0 w-full h-full cursor-pointer",
+				className: "opacity-0 absolute inset-0 w-full h-full cursor-pointer outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 				id: `${S}-prefix`,
 				"aria-label": `${C}-prefix`,
 				children: o.map((e) => /* @__PURE__ */ h("option", {
@@ -120,7 +120,7 @@ var _ = (e) => {
 				onChange: k,
 				onKeyDown: O,
 				placeholder: l,
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 					"border-middleGrey focus:border-black active:border-black": w === "default",
 					"pe-[52px]": w === "error" || w === "success",
 					"bg-white text-black": w !== "disabled",

package/ui/forms/PhoneFieldSplitInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  DEFAULT_PHONE_PREFIXES,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  type PhonePrefix,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (event: Event, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n  prefixes?: PhonePrefix[];\n  defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  pattern: string;\n  defaultPrefix: string;\n  onChange?: PhoneFieldChangeHandler;\n}) => {\n  const { externalValue, pattern, defaultPrefix, onChange } = args;\n  const numberInputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [prefix, setPrefix] = useState(defaultPrefix);\n  const [number, setNumber] = useState('');\n\n  const emitChange = useCallback(\n    (event: Event, nextPrefix: string, nextNumber: string) => {\n      if (nextPrefix === prefix && nextNumber === number) {\n        return;\n      }\n\n      const full = `${nextPrefix} ${nextNumber}`.trim();\n\n      onChange?.(event, {\n        full,\n        prefix: nextPrefix,\n        number: nextNumber,\n        raw: extractDigits(full),\n      });\n    },\n    [number, onChange, prefix],\n  );\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && numberInputRef.current) {\n      numberInputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current,\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [number]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setPrefix(externalValue.prefix || defaultPrefix);\n      setNumber(externalValue.number || '');\n    }\n  }, [externalValue, defaultPrefix]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') {\n        return;\n      }\n\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n      if (cursorPosition !== selectionEnd) {\n        return;\n      }\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      const targetChar =\n        e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n      if (!targetChar || /\\d/.test(targetChar)) {\n        return;\n      }\n\n      e.preventDefault();\n\n      const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(number.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n\n      setNumber(formatted);\n\n      emitChange(e.nativeEvent, prefix, formatted);\n    },\n    [emitChange, pattern, number, prefix],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setNumber(formattedValue.formatted);\n\n      emitChange(e.nativeEvent, prefix, formattedValue.formatted);\n    },\n    [emitChange, pattern, prefix],\n  );\n\n  const onPrefixChange = useCallback(\n    (event: Event, newPrefix: string) => {\n      setPrefix(newPrefix);\n\n      emitChange(event, newPrefix, number);\n    },\n    [emitChange, number],\n  );\n\n  return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  prefixes?: PhoneFieldSplitProps['prefixes'];\n  defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  prefixes = DEFAULT_PHONE_PREFIXES,\n  defaultPrefix = prefixes[0]?.code || '+1',\n  placeholder = '',\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...rest\n}: PhoneFieldSplitInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n    usePhoneField({\n      externalValue,\n      pattern,\n      defaultPrefix,\n      onChange,\n    });\n\n  return (\n    <div className=\"flex gap-8\">\n      <div\n        className={clsx('relative rounded-pill z-0 flex-shrink-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        {/* Visible fake select showing the short label */}\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8',\n            {\n              'border-middleGrey': internalStatus === 'default',\n              'text-black bg-white': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey text-black': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span>{(prefixes as PhonePrefix[]).find((p) => p.code === prefix)?.label ?? prefix}</span>\n          <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n        </div>\n\n        {/* Real select — invisible but interactive, uses fullLabel for dropdown options */}\n        <select\n          disabled={disabled}\n          value={prefix}\n          onChange={(e) => onPrefixChange(e.nativeEvent, e.target.value)}\n          className=\"opacity-0 absolute inset-0 w-full h-full cursor-pointer\"\n          id={`${resolvedId}-prefix`}\n          aria-label={`${resolvedName}-prefix`}\n        >\n          {(prefixes as PhonePrefix[]).map((p) => (\n            <option key={p.code} value={p.code}>\n              {p.fullLabel ?? p.label ?? p.code}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      <div className=\"relative flex-1\">\n        <input\n          {...(rest as Record<string, unknown>)}\n          ref={numberInputRef}\n          type=\"tel\"\n          disabled={disabled}\n          required={required}\n          value={number}\n          onChange={onInputChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={`${resolvedName}-number`}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  DEFAULT_PHONE_PREFIXES,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  type PhonePrefix,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (event: Event, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n  prefixes?: PhonePrefix[];\n  defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  pattern: string;\n  defaultPrefix: string;\n  onChange?: PhoneFieldChangeHandler;\n}) => {\n  const { externalValue, pattern, defaultPrefix, onChange } = args;\n  const numberInputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [prefix, setPrefix] = useState(defaultPrefix);\n  const [number, setNumber] = useState('');\n\n  const emitChange = useCallback(\n    (event: Event, nextPrefix: string, nextNumber: string) => {\n      if (nextPrefix === prefix && nextNumber === number) {\n        return;\n      }\n\n      const full = `${nextPrefix} ${nextNumber}`.trim();\n\n      onChange?.(event, {\n        full,\n        prefix: nextPrefix,\n        number: nextNumber,\n        raw: extractDigits(full),\n      });\n    },\n    [number, onChange, prefix],\n  );\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && numberInputRef.current) {\n      numberInputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current,\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [number]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setPrefix(externalValue.prefix || defaultPrefix);\n      setNumber(externalValue.number || '');\n    }\n  }, [externalValue, defaultPrefix]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') {\n        return;\n      }\n\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n      if (cursorPosition !== selectionEnd) {\n        return;\n      }\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      const targetChar =\n        e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n      if (!targetChar || /\\d/.test(targetChar)) {\n        return;\n      }\n\n      e.preventDefault();\n\n      const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(number.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n\n      setNumber(formatted);\n\n      emitChange(e.nativeEvent, prefix, formatted);\n    },\n    [emitChange, pattern, number, prefix],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setNumber(formattedValue.formatted);\n\n      emitChange(e.nativeEvent, prefix, formattedValue.formatted);\n    },\n    [emitChange, pattern, prefix],\n  );\n\n  const onPrefixChange = useCallback(\n    (event: Event, newPrefix: string) => {\n      setPrefix(newPrefix);\n\n      emitChange(event, newPrefix, number);\n    },\n    [emitChange, number],\n  );\n\n  return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  prefixes?: PhoneFieldSplitProps['prefixes'];\n  defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  prefixes = DEFAULT_PHONE_PREFIXES,\n  defaultPrefix = prefixes[0]?.code || '+1',\n  placeholder = '',\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...rest\n}: PhoneFieldSplitInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n    usePhoneField({\n      externalValue,\n      pattern,\n      defaultPrefix,\n      onChange,\n    });\n\n  return (\n    <div className=\"flex gap-8\">\n      <div\n        className={clsx('relative rounded-pill z-0 flex-shrink-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        {/* Visible fake select showing the short label */}\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8',\n            {\n              'border-middleGrey': internalStatus === 'default',\n              'text-black bg-white': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey text-black': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span>{(prefixes as PhonePrefix[]).find((p) => p.code === prefix)?.label ?? prefix}</span>\n          <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n        </div>\n\n        {/* Real select — invisible but interactive, uses fullLabel for dropdown options */}\n        <select\n          disabled={disabled}\n          value={prefix}\n          onChange={(e) => onPrefixChange(e.nativeEvent, e.target.value)}\n          className=\"opacity-0 absolute inset-0 w-full h-full cursor-pointer outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n          id={`${resolvedId}-prefix`}\n          aria-label={`${resolvedName}-prefix`}\n        >\n          {(prefixes as PhonePrefix[]).map((p) => (\n            <option key={p.code} value={p.code}>\n              {p.fullLabel ?? p.label ?? p.code}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      <div className=\"relative flex-1\">\n        <input\n          {...(rest as Record<string, unknown>)}\n          ref={numberInputRef}\n          type=\"tel\"\n          disabled={disabled}\n          required={required}\n          value={number}\n          onChange={onInputChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={`${resolvedName}-number`}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/Select.js

@@ -41,7 +41,7 @@ var c = (c) => {
 				onChange: (e) => {
 					D(e.target.value, e.nativeEvent);
 				},
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none appearance-none bg-transparent", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 appearance-none bg-transparent", {
 					"border-middleGrey focus:border-black active:border-black pe-[52px]": O === "default",
 					"pe-[84px]": O === "error" || O === "success",
 					"text-black": O !== "disabled",

package/ui/forms/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../lib/ui/forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => {\n            setValue(e.target.value as Value, e.nativeEvent);\n          }}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none appearance-none bg-transparent',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,KAA2B,MAA8B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,GACb,aACA,aACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU,CAAC,EACjE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC;AAEF,QACE,kBAAC,GAAD;EACM;EACO;EACJ;EACM;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GACE,WAAW,EAAK,6BAA6B;IAC3C,YAAY,MAAmB;IAC/B,8BAA8B,MAAmB;IAClD,CAAC;aAJJ,CAME,kBAAC,UAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM;AACf,OAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;;IAElD,WAAW,EACT,0HACA;KACE,sEACE,MAAmB;KACrB,aAAa,MAAmB,WAAW,MAAmB;KAC9D,cAAc,MAAmB;KACjC,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IAEX;IACM,CAAA,EAET,kBAAC,OAAD;IACE,WAAW,EACT,2FACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG3D,kBAAC,UAAD;OAAQ,WAAU;iBAChB,kBAAC,GAAD;QAAM,MAAK;QAAmB,MAAK;QAAM,OAAM;QAAO,OAAM;QAAU,CAAA;OAC/D,CAAA;MACJ;;IACH,CAAA,CACF;;EACM,CAAA"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../lib/ui/forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => {\n            setValue(e.target.value as Value, e.nativeEvent);\n          }}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 appearance-none bg-transparent',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,KAA2B,MAA8B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,GACb,aACA,aACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU,CAAC,EACjE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC;AAEF,QACE,kBAAC,GAAD;EACM;EACO;EACJ;EACM;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GACE,WAAW,EAAK,6BAA6B;IAC3C,YAAY,MAAmB;IAC/B,8BAA8B,MAAmB;IAClD,CAAC;aAJJ,CAME,kBAAC,UAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM;AACf,OAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;;IAElD,WAAW,EACT,oMACA;KACE,sEACE,MAAmB;KACrB,aAAa,MAAmB,WAAW,MAAmB;KAC9D,cAAc,MAAmB;KACjC,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IAEX;IACM,CAAA,EAET,kBAAC,OAAD;IACE,WAAW,EACT,2FACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG3D,kBAAC,UAAD;OAAQ,WAAU;iBAChB,kBAAC,GAAD;QAAM,MAAK;QAAmB,MAAK;QAAM,OAAM;QAAO,OAAM;QAAU,CAAA;OAC/D,CAAA;MACJ;;IACH,CAAA,CACF;;EACM,CAAA"}

package/ui/forms/TextField.js

@@ -41,7 +41,7 @@ var c = (c) => {
 					"--nbIconsStart": Number(!!g && E),
 					"--nbIconsEnd": Number(!!g && !E) + Number(w && !N || N && M !== "error") + Number(M === "error" || M === "success")
 				},
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
 					"border-middleGrey focus:border-black active:border-black": M === "default",
 					"bg-white text-black": M !== "disabled",
 					"bg-pearl border-middleGrey": M === "disabled",
@@ -62,7 +62,7 @@ var c = (c) => {
 					className: "ms-auto flex gap-x-8",
 					children: [
 						M === "error" && (N ? /* @__PURE__ */ o("button", {
-							className: "pointer-events-auto cursor-pointer flex",
+							className: "pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 							onClick: (e) => j("", e.nativeEvent),
 							"aria-label": T,
 							type: "reset",
@@ -82,7 +82,7 @@ var c = (c) => {
 							type: _
 						}),
 						(w || N && M !== "error") && (N ? /* @__PURE__ */ o("button", {
-							className: "pointer-events-auto cursor-pointer flex",
+							className: "pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 							onClick: (e) => j("", e.nativeEvent),
 							"aria-label": T,
 							type: "reset",