ixia-ui-react 1.8.0 → 2.0.0

package/dist/meter-HD5taq57.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-HD5taq57.js","names":["Meter","BaseMeter","BaseMeter","BaseMeter","BaseMeter","BaseMeter","Meter","MeterRoot"],"sources":["../src/components/meter/meter.types.ts","../src/components/meter/meter.tsx","../src/components/meter/meter-footer.tsx","../src/components/meter/meter-header.tsx","../src/components/meter/meter-indicator.tsx","../src/components/meter/meter-label.tsx","../src/components/meter/meter-subtitle.tsx","../src/components/meter/meter-track.tsx","../src/components/meter/meter-value.tsx","../src/components/meter/index.ts"],"sourcesContent":["import type { Meter as BaseMeter } from '@base-ui/react'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\ntype MeterProps = React.ComponentProps<typeof BaseMeter.Root> & VariantProps<typeof meterVariants>\ntype MeterLabelProps = React.ComponentProps<typeof BaseMeter.Label>\ntype MeterValueProps = React.ComponentProps<typeof BaseMeter.Value>\ntype MeterTrackProps = React.ComponentProps<typeof BaseMeter.Track>\ntype MeterIndicatorProps = React.ComponentProps<typeof BaseMeter.Indicator>\ntype MeterHeaderProps = React.ComponentProps<'div'>\ntype MeterFooterProps = React.ComponentProps<'div'>\ntype MeterSubtitleProps = React.ComponentProps<'span'>\n\nconst meterVariants = cva('', {\n  defaultVariants: {\n    orientation: 'vertical',\n    size: 'medium',\n    tone: 'brand',\n  },\n  variants: {\n    orientation: {\n      horizontal:\n        'flex items-center justify-between gap-xs [&_[data-track]]:w-full [&_button]:shrink-0',\n      vertical: 'flex flex-col space-y-3xs',\n    },\n    size: {\n      large: '[&_[data-track]]:h-xs',\n      medium: '[&_[data-track]]:h-2xs',\n      small: '[&_[data-track]]:h-3xs',\n    },\n    tone: {\n      accent: '[&_[data-indicator]]:bg-accent-default',\n      brand: '[&_[data-indicator]]:bg-brand-default',\n      error: '[&_[data-indicator]]:bg-error-default',\n      info: '[&_[data-indicator]]:bg-info-default',\n      neutral: '[&_[data-indicator]]:bg-neutral-default',\n      success: '[&_[data-indicator]]:bg-success-default',\n      warning: '[&_[data-indicator]]:bg-warning-default',\n    },\n  },\n})\n\nexport { meterVariants }\nexport type {\n  MeterProps,\n  MeterLabelProps,\n  MeterValueProps,\n  MeterTrackProps,\n  MeterIndicatorProps,\n  MeterHeaderProps,\n  MeterFooterProps,\n  MeterSubtitleProps,\n}\n","import { Meter as BaseMeter } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { meterVariants } from './meter.types'\nimport type { MeterProps } from './meter.types'\n\nexport function Meter({ orientation, size, tone, className, ref, ...props }: MeterProps) {\n  return (\n    <BaseMeter.Root\n      className={cn(meterVariants({ className, orientation, size, tone }))}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { MeterFooterProps } from './meter.types'\n\nexport function MeterFooter({ className, ref, ...props }: MeterFooterProps) {\n  return <div className={cn('flex items-center justify-between', className)} ref={ref} {...props} />\n}\n","import { cn } from '@/utils/cn'\n\nimport type { MeterHeaderProps } from './meter.types'\n\nexport function MeterHeader({ className, ref, ...props }: MeterHeaderProps) {\n  return <div className={cn('flex items-center justify-between', className)} ref={ref} {...props} />\n}\n","import { Meter as BaseMeter } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { MeterIndicatorProps } from './meter.types'\n\nexport function MeterIndicator({ className, ref, ...props }: MeterIndicatorProps) {\n  return (\n    <BaseMeter.Indicator\n      data-indicator\n      className={cn('rounded-full', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { Meter as BaseMeter } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { MeterLabelProps } from './meter.types'\n\nexport function MeterLabel({ className, ref, ...props }: MeterLabelProps) {\n  return (\n    <BaseMeter.Label\n      className={cn(\n        'flex items-center gap-2xs style-text-strong--1 text-on-surface [&>svg]:size-xs',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { MeterSubtitleProps } from './meter.types'\n\nexport function MeterSubtitle({ className, ref, ...props }: MeterSubtitleProps) {\n  return (\n    <span\n      className={cn(\n        'text-left style-text-prose--2 whitespace-nowrap text-on-surface-variant',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { Meter as BaseMeter } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { MeterTrackProps } from './meter.types'\n\nexport function MeterTrack({ className, ref, ...props }: MeterTrackProps) {\n  return (\n    <BaseMeter.Track\n      className={cn('w-full self-center rounded-full bg-neutral-container', className)}\n      data-track\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { Meter as BaseMeter } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { MeterValueProps } from './meter.types'\n\nexport function MeterValue({ className, ref, ...props }: MeterValueProps) {\n  return (\n    <BaseMeter.Value\n      className={cn('ml-auto text-right style-text-prose--2 text-on-surface-variant', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { Meter as MeterRoot } from './meter'\nimport { MeterFooter } from './meter-footer'\nimport { MeterHeader } from './meter-header'\nimport { MeterIndicator } from './meter-indicator'\nimport { MeterLabel } from './meter-label'\nimport { MeterSubtitle } from './meter-subtitle'\nimport { MeterTrack } from './meter-track'\nimport { MeterValue } from './meter-value'\n\nconst Meter = Object.assign(MeterRoot, {\n  Footer: MeterFooter,\n  Header: MeterHeader,\n  Indicator: MeterIndicator,\n  Label: MeterLabel,\n  Subtitle: MeterSubtitle,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nexport type {\n  MeterHeaderProps,\n  MeterIndicatorProps,\n  MeterLabelProps,\n  MeterProps,\n  MeterTrackProps,\n  MeterValueProps,\n  MeterFooterProps,\n  MeterSubtitleProps,\n} from './meter.types'\nexport { MeterHeader } from './meter-header'\nexport { MeterIndicator } from './meter-indicator'\nexport { MeterLabel } from './meter-label'\nexport { MeterTrack } from './meter-track'\nexport { MeterValue } from './meter-value'\nexport { MeterFooter } from './meter-footer'\nexport { MeterSubtitle } from './meter-subtitle'\nexport { Meter }\n"],"mappings":";;;;;AAaA,MAAM,gBAAgB,IAAI,IAAI;CAC5B,iBAAiB;EACf,aAAa;EACb,MAAM;EACN,MAAM;CACR;CACA,UAAU;EACR,aAAa;GACX,YACE;GACF,UAAU;EACZ;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,OAAO;GACP,MAAM;GACN,SAAS;GACT,SAAS;GACT,SAAS;EACX;CACF;AACF,CAAC;;ACjCD,SAAgBA,QAAM,EAAE,aAAa,MAAM,MAAM,WAAW,KAAK,GAAG,SAAqB;CACvF,OACE,oBAACC,MAAU,MAAX;EACE,WAAW,GAAG,cAAc;GAAE;GAAW;GAAa;GAAM;EAAK,CAAC,CAAC;EAC9D;EACL,GAAI;CACL,CAAA;AAEL;;ACXA,SAAgB,YAAY,EAAE,WAAW,KAAK,GAAG,SAA2B;CAC1E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,qCAAqC,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AACnG;;ACFA,SAAgB,YAAY,EAAE,WAAW,KAAK,GAAG,SAA2B;CAC1E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,qCAAqC,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AACnG;;ACAA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OACE,oBAACC,MAAU,WAAX;EACE,kBAAA;EACA,WAAW,GAAG,gBAAgB,SAAS;EAClC;EACL,GAAI;CACL,CAAA;AAEL;;ACTA,SAAgB,WAAW,EAAE,WAAW,KAAK,GAAG,SAA0B;CACxE,OACE,oBAACC,MAAU,OAAX;EACE,WAAW,GACT,kFACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACbA,SAAgB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CAC9E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,2EACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACTA,SAAgB,WAAW,EAAE,WAAW,KAAK,GAAG,SAA0B;CACxE,OACE,oBAACC,MAAU,OAAX;EACE,WAAW,GAAG,wDAAwD,SAAS;EAC/E,cAAA;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACTA,SAAgB,WAAW,EAAE,WAAW,KAAK,GAAG,SAA0B;CACxE,OACE,oBAACC,MAAU,OAAX;EACE,WAAW,GAAG,kEAAkE,SAAS;EACpF;EACL,GAAI;CACL,CAAA;AAEL;;ACLA,MAAMC,UAAQ,OAAO,OAAOC,SAAW;CACrC,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,OAAO;CACP,UAAU;CACV,OAAO;CACP,OAAO;AACT,CAAC"}

package/dist/nav-bar/index.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from "class-variance-authority";
+type NavBarProps = React.ComponentProps<'div'> & VariantProps<typeof navBarVariants>;
+type NavBarItemProps = React.ComponentProps<'button'> & VariantProps<typeof navBarItemVariants> & {
+  isActive?: boolean;
+};
+type NavBarItemIconProps = React.ComponentProps<'div'>;
+type NavBarItemLabelProps = React.ComponentProps<'span'>;
+declare const navBarVariants: (props?: ({
+  itemOrientation?: "horizontal" | "vertical" | null | undefined;
+  size?: "large" | "medium" | "small" | null | undefined;
+  variant?: "floating" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string, navBarItemVariants: (props?: ({
+  tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function NavBar$1({ itemOrientation, size, variant, className, ref, ...props }: NavBarProps): import("react").JSX.Element;
+export declare function NavBarItem({ isActive, tone, className, ref, ...props }: NavBarItemProps): import("react").JSX.Element;
+export declare function NavBarItemIcon({ className, ref, ...props }: NavBarItemIconProps): import("react").JSX.Element;
+export declare function NavBarItemLabel({ className, ref, ...props }: NavBarItemLabelProps): import("react").JSX.Element;
+declare const NavBar: typeof NavBar$1 & {
+  Item: typeof NavBarItem;
+  ItemIcon: typeof NavBarItemIcon;
+  ItemLabel: typeof NavBarItemLabel;
+};
+export { NavBar, type NavBarItemIconProps, type NavBarItemLabelProps, type NavBarItemProps, type NavBarProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/nav-bar/index.js

@@ -0,0 +1,133 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+// src/components/nav-bar/nav-bar.types.ts
+const navBarVariants = cva("flex h-fit items-center justify-between", {
+	compoundVariants: [
+		{
+			className: "rounded-xl",
+			size: "small",
+			variant: "floating"
+		},
+		{
+			className: "rounded-2xl",
+			size: "medium",
+			variant: "floating"
+		},
+		{
+			className: "rounded-3xl",
+			size: "large",
+			variant: "floating"
+		},
+		{
+			className: "[&_[data-nav-bar-item]]:max-w-2xl [&_[data-nav-bar-item]]:gap-3xs [&_[data-nav-bar-item]]:rounded-xl [&_[data-nav-bar-item]]:p-[min(var(--spacing-2xs),25%)]",
+			itemOrientation: "vertical",
+			size: "small"
+		},
+		{
+			className: "[&_[data-nav-bar-item]]:max-w-3xl [&_[data-nav-bar-item]]:gap-3xs [&_[data-nav-bar-item]]:rounded-2xl [&_[data-nav-bar-item]]:p-[min(var(--spacing-sm),25%)]",
+			itemOrientation: "vertical",
+			size: "medium"
+		},
+		{
+			className: "[&_[data-nav-bar-item]]:gap-2xs [&_[data-nav-bar-item]]:rounded-3xl [&_[data-nav-bar-item]]:p-[min(var(--spacing-md),25%)]",
+			itemOrientation: "vertical",
+			size: "large"
+		},
+		{
+			className: "[&_[data-nav-bar-item]]:h-lg [&_[data-nav-bar-item]]:gap-3xs [&_[data-nav-bar-item]]:rounded-lg [&_[data-nav-bar-item]]:px-xs",
+			itemOrientation: "horizontal",
+			size: "small"
+		},
+		{
+			className: "[&_[data-nav-bar-item]]:h-xl [&_[data-nav-bar-item]]:gap-2xs [&_[data-nav-bar-item]]:rounded-xl [&_[data-nav-bar-item]]:px-sm",
+			itemOrientation: "horizontal",
+			size: "medium"
+		},
+		{
+			className: "[&_[data-nav-bar-item]]:h-2xl [&_[data-nav-bar-item]]:gap-xs [&_[data-nav-bar-item]]:rounded-2xl [&_[data-nav-bar-item]]:px-md",
+			itemOrientation: "horizontal",
+			size: "large"
+		}
+	],
+	defaultVariants: {
+		itemOrientation: "vertical",
+		size: "medium",
+		variant: "outline"
+	},
+	variants: {
+		itemOrientation: {
+			horizontal: "[&_[data-nav-bar-item]]:flex-row",
+			vertical: "grid auto-cols-fr grid-flow-col items-start justify-items-center [&_[data-nav-bar-item]]:min-h-0 [&_[data-nav-bar-item]]:w-full [&_[data-nav-bar-item]]:min-w-0 [&_[data-nav-bar-item]]:flex-col [&_[data-nav-bar-item]]:overflow-hidden [&_[data-nav-bar-item]_span]:max-w-full [&_[data-nav-bar-item]_span]:truncate"
+		},
+		size: {
+			large: "gap-sm p-md [&_span]:style-text-default-0 [&_svg]:size-lg",
+			medium: "gap-xs p-sm [&_span]:style-text-default--1 [&_svg]:size-md",
+			small: "gap-2xs p-xs [&_span]:style-text-default--2 [&_svg]:size-sm"
+		},
+		variant: {
+			floating: "absolute bottom-md w-fit max-w-15/16 overflow-x-auto bg-surface shadow-2xs",
+			outline: "w-full border border-border bg-surface-background"
+		}
+	}
+});
+const navBarItemVariants = cva("flex aspect-square items-center justify-center transition-all disabled:pointer-events-none disabled:opacity-50 data-[active=false]:hover:cursor-pointer data-[active=false]:active:scale-95 [&>svg]:shrink-0", {
+	defaultVariants: { tone: "neutral" },
+	variants: { tone: {
+		accent: "text-accent-default hover:bg-accent-container hover:text-accent-on-container data-[active=true]:bg-accent-container data-[active=true]:text-accent-on-container",
+		brand: "text-brand-default hover:bg-brand-container hover:text-brand-on-container data-[active=true]:bg-brand-container data-[active=true]:text-brand-on-container",
+		error: "text-error-default hover:bg-error-container hover:text-error-on-container data-[active=true]:bg-error-container data-[active=true]:text-error-on-container",
+		info: "text-info-default hover:bg-info-container hover:text-info-on-container data-[active=true]:bg-info-container data-[active=true]:text-info-on-container",
+		neutral: "text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container data-[active=true]:bg-neutral-container data-[active=true]:text-neutral-on-container",
+		success: "text-success-default hover:bg-success-container hover:text-success-on-container data-[active=true]:bg-success-container data-[active=true]:text-success-on-container",
+		warning: "text-warning-default hover:bg-warning-container hover:text-warning-on-container data-[active=true]:bg-warning-container data-[active=true]:text-warning-on-container"
+	} }
+});
+// src/components/nav-bar/nav-bar.tsx
+function NavBar$1({ itemOrientation, size, variant, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(navBarVariants({
+			itemOrientation,
+			size,
+			variant
+		}), className),
+		ref,
+		...props
+	});
+}
+// src/components/nav-bar/nav-bar-item.tsx
+function NavBarItem({ isActive = false, tone, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-active": isActive,
+		"data-nav-bar-item": true,
+		className: cn(navBarItemVariants({ tone }), className),
+		ref,
+		...props
+	});
+}
+// src/components/nav-bar/nav-bar-item-icon.tsx
+function NavBarItemIcon({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("", className),
+		ref,
+		...props
+	});
+}
+// src/components/nav-bar/nav-bar-item-label.tsx
+function NavBarItemLabel({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("", className),
+		ref,
+		...props
+	});
+}
+// src/components/nav-bar/index.ts
+const NavBar = Object.assign(NavBar$1, {
+	Item: NavBarItem,
+	ItemIcon: NavBarItemIcon,
+	ItemLabel: NavBarItemLabel
+});
+export { NavBar, NavBarItem, NavBarItemIcon, NavBarItemLabel };
+
+//# sourceMappingURL=index.js.map

package/dist/nav-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["NavBar","NavBarRoot"],"sources":["../../src/components/nav-bar/nav-bar.types.ts","../../src/components/nav-bar/nav-bar.tsx","../../src/components/nav-bar/nav-bar-item.tsx","../../src/components/nav-bar/nav-bar-item-icon.tsx","../../src/components/nav-bar/nav-bar-item-label.tsx","../../src/components/nav-bar/index.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\ntype NavBarProps = React.ComponentProps<'div'> & VariantProps<typeof navBarVariants>\ntype NavBarItemProps = React.ComponentProps<'button'> &\n  VariantProps<typeof navBarItemVariants> & {\n    isActive?: boolean\n  }\ntype NavBarItemIconProps = React.ComponentProps<'div'>\ntype NavBarItemLabelProps = React.ComponentProps<'span'>\n\nconst navBarVariants = cva('flex h-fit items-center justify-between', {\n    compoundVariants: [\n      {\n        className: 'rounded-xl',\n        size: 'small',\n        variant: 'floating',\n      },\n      {\n        className: 'rounded-2xl',\n        size: 'medium',\n        variant: 'floating',\n      },\n      {\n        className: 'rounded-3xl',\n        size: 'large',\n        variant: 'floating',\n      },\n      {\n        className:\n          '[&_[data-nav-bar-item]]:max-w-2xl [&_[data-nav-bar-item]]:gap-3xs [&_[data-nav-bar-item]]:rounded-xl [&_[data-nav-bar-item]]:p-[min(var(--spacing-2xs),25%)]',\n        itemOrientation: 'vertical',\n        size: 'small',\n      },\n      {\n        className:\n          '[&_[data-nav-bar-item]]:max-w-3xl [&_[data-nav-bar-item]]:gap-3xs [&_[data-nav-bar-item]]:rounded-2xl [&_[data-nav-bar-item]]:p-[min(var(--spacing-sm),25%)]',\n        itemOrientation: 'vertical',\n        size: 'medium',\n      },\n      {\n        className:\n          '[&_[data-nav-bar-item]]:gap-2xs [&_[data-nav-bar-item]]:rounded-3xl [&_[data-nav-bar-item]]:p-[min(var(--spacing-md),25%)]',\n        itemOrientation: 'vertical',\n        size: 'large',\n      },\n      {\n        className:\n          '[&_[data-nav-bar-item]]:h-lg [&_[data-nav-bar-item]]:gap-3xs [&_[data-nav-bar-item]]:rounded-lg [&_[data-nav-bar-item]]:px-xs',\n        itemOrientation: 'horizontal',\n        size: 'small',\n      },\n      {\n        className:\n          '[&_[data-nav-bar-item]]:h-xl [&_[data-nav-bar-item]]:gap-2xs [&_[data-nav-bar-item]]:rounded-xl [&_[data-nav-bar-item]]:px-sm',\n        itemOrientation: 'horizontal',\n        size: 'medium',\n      },\n      {\n        className:\n          '[&_[data-nav-bar-item]]:h-2xl [&_[data-nav-bar-item]]:gap-xs [&_[data-nav-bar-item]]:rounded-2xl [&_[data-nav-bar-item]]:px-md',\n        itemOrientation: 'horizontal',\n        size: 'large',\n      },\n    ],\n    defaultVariants: {\n      itemOrientation: 'vertical',\n      size: 'medium',\n      variant: 'outline',\n    },\n    variants: {\n      itemOrientation: {\n        horizontal: '[&_[data-nav-bar-item]]:flex-row',\n        vertical:\n          'grid auto-cols-fr grid-flow-col items-start justify-items-center [&_[data-nav-bar-item]]:min-h-0 [&_[data-nav-bar-item]]:w-full [&_[data-nav-bar-item]]:min-w-0 [&_[data-nav-bar-item]]:flex-col [&_[data-nav-bar-item]]:overflow-hidden [&_[data-nav-bar-item]_span]:max-w-full [&_[data-nav-bar-item]_span]:truncate',\n      },\n      size: {\n        large: 'gap-sm p-md [&_span]:style-text-default-0 [&_svg]:size-lg',\n        medium: 'gap-xs p-sm [&_span]:style-text-default--1 [&_svg]:size-md',\n        small: 'gap-2xs p-xs [&_span]:style-text-default--2 [&_svg]:size-sm',\n      },\n      variant: {\n        floating: 'absolute bottom-md w-fit max-w-15/16 overflow-x-auto bg-surface shadow-2xs',\n        outline: 'w-full border border-border bg-surface-background',\n      },\n    },\n  }),\n  navBarItemVariants = cva(\n    'flex aspect-square items-center justify-center transition-all disabled:pointer-events-none disabled:opacity-50 data-[active=false]:hover:cursor-pointer data-[active=false]:active:scale-95 [&>svg]:shrink-0',\n    {\n      defaultVariants: {\n        tone: 'neutral',\n      },\n      variants: {\n        tone: {\n          accent:\n            'text-accent-default hover:bg-accent-container hover:text-accent-on-container data-[active=true]:bg-accent-container data-[active=true]:text-accent-on-container',\n          brand:\n            'text-brand-default hover:bg-brand-container hover:text-brand-on-container data-[active=true]:bg-brand-container data-[active=true]:text-brand-on-container',\n          error:\n            'text-error-default hover:bg-error-container hover:text-error-on-container data-[active=true]:bg-error-container data-[active=true]:text-error-on-container',\n          info: 'text-info-default hover:bg-info-container hover:text-info-on-container data-[active=true]:bg-info-container data-[active=true]:text-info-on-container',\n          neutral:\n            'text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container data-[active=true]:bg-neutral-container data-[active=true]:text-neutral-on-container',\n          success:\n            'text-success-default hover:bg-success-container hover:text-success-on-container data-[active=true]:bg-success-container data-[active=true]:text-success-on-container',\n          warning:\n            'text-warning-default hover:bg-warning-container hover:text-warning-on-container data-[active=true]:bg-warning-container data-[active=true]:text-warning-on-container',\n        },\n      },\n    },\n  )\n\nexport { navBarVariants, navBarItemVariants }\nexport type { NavBarProps, NavBarItemProps, NavBarItemIconProps, NavBarItemLabelProps }\n","import { cn } from '@/utils/cn'\n\nimport { navBarVariants } from './nav-bar.types'\nimport type { NavBarProps } from './nav-bar.types'\n\nexport function NavBar({ itemOrientation, size, variant, className, ref, ...props }: NavBarProps) {\n  return (\n    <div\n      className={cn(navBarVariants({ itemOrientation, size, variant }), className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { navBarItemVariants } from './nav-bar.types'\nimport type { NavBarItemProps } from './nav-bar.types'\n\nexport function NavBarItem({ isActive = false, tone, className, ref, ...props }: NavBarItemProps) {\n  return (\n    <button\n      type=\"button\"\n      data-active={isActive}\n      data-nav-bar-item\n      className={cn(navBarItemVariants({ tone }), className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { NavBarItemIconProps } from './nav-bar.types'\n\nexport function NavBarItemIcon({ className, ref, ...props }: NavBarItemIconProps) {\n  return <div className={cn('', className)} ref={ref} {...props} />\n}\n","import { cn } from '@/utils/cn'\n\nimport type { NavBarItemLabelProps } from './nav-bar.types'\n\nexport function NavBarItemLabel({ className, ref, ...props }: NavBarItemLabelProps) {\n  return <span className={cn('', className)} ref={ref} {...props} />\n}\n","import { NavBar as NavBarRoot } from './nav-bar'\nimport { NavBarItem } from './nav-bar-item'\nimport { NavBarItemIcon } from './nav-bar-item-icon'\nimport { NavBarItemLabel } from './nav-bar-item-label'\n\nconst NavBar = Object.assign(NavBarRoot, {\n  Item: NavBarItem,\n  ItemIcon: NavBarItemIcon,\n  ItemLabel: NavBarItemLabel,\n})\n\nexport type {\n  NavBarProps,\n  NavBarItemIconProps,\n  NavBarItemProps,\n  NavBarItemLabelProps,\n} from './nav-bar.types'\nexport { NavBarItem } from './nav-bar-item'\nexport { NavBarItemIcon } from './nav-bar-item-icon'\nexport { NavBarItemLabel } from './nav-bar-item-label'\n\nexport { NavBar }\n"],"mappings":";;;;AAWA,MAAM,iBAAiB,IAAI,2CAA2C;CAClE,kBAAkB;EAChB;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WAAW;GACX,MAAM;GACN,SAAS;EACX;EACA;GACE,WACE;GACF,iBAAiB;GACjB,MAAM;EACR;EACA;GACE,WACE;GACF,iBAAiB;GACjB,MAAM;EACR;EACA;GACE,WACE;GACF,iBAAiB;GACjB,MAAM;EACR;EACA;GACE,WACE;GACF,iBAAiB;GACjB,MAAM;EACR;EACA;GACE,WACE;GACF,iBAAiB;GACjB,MAAM;EACR;EACA;GACE,WACE;GACF,iBAAiB;GACjB,MAAM;EACR;CACF;CACA,iBAAiB;EACf,iBAAiB;EACjB,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,iBAAiB;GACf,YAAY;GACZ,UACE;EACJ;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;EACA,SAAS;GACP,UAAU;GACV,SAAS;EACX;CACF;AACF,CAAC;AACD,MAAA,qBAAqB,IACnB,gNACA;CACE,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,QACE;EACF,OACE;EACF,OACE;EACF,MAAM;EACN,SACE;EACF,SACE;EACF,SACE;CACJ,EACF;AACF,CACF;;AC1GF,SAAgBA,SAAO,EAAE,iBAAiB,MAAM,SAAS,WAAW,KAAK,GAAG,SAAsB;CAChG,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,eAAe;GAAE;GAAiB;GAAM;EAAQ,CAAC,GAAG,SAAS;EACtE;EACL,GAAI;CACL,CAAA;AAEL;;ACRA,SAAgB,WAAW,EAAE,WAAW,OAAO,MAAM,WAAW,KAAK,GAAG,SAA0B;CAChG,OACE,oBAAC,UAAD;EACE,MAAK;EACL,eAAa;EACb,qBAAA;EACA,WAAW,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS;EAChD;EACL,GAAI;CACL,CAAA;AAEL;;ACZA,SAAgB,eAAe,EAAE,WAAW,KAAK,GAAG,SAA8B;CAChF,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,IAAI,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AAClE;;ACFA,SAAgB,gBAAgB,EAAE,WAAW,KAAK,GAAG,SAA+B;CAClF,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,IAAI,SAAS;EAAQ;EAAK,GAAI;CAAQ,CAAA;AACnE;;ACDA,MAAM,SAAS,OAAO,OAAOC,UAAY;CACvC,MAAM;CACN,UAAU;CACV,WAAW;AACb,CAAC"}

package/dist/navigation-menu/index.d.ts

@@ -0,0 +1,43 @@
+import { VariantProps } from "class-variance-authority";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react";
+type NavigationMenuProps = React.ComponentProps<typeof NavigationMenu$1.Root>;
+type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenu$1.List>;
+type NavigationMenuItemProps = React.ComponentProps<typeof NavigationMenu$1.Item>;
+type NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenu$1.Trigger> & VariantProps<typeof navigationMenuTriggerVariants> & {
+  isActive?: boolean;
+};
+type NavigationMenuIconProps = React.ComponentProps<typeof NavigationMenu$1.Icon>;
+type NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenu$1.Content>;
+type NavigationMenuPopupProps = React.ComponentProps<typeof NavigationMenu$1.Positioner>;
+declare const navigationMenuTriggerVariants: (props?: ({
+  size?: "large" | "medium" | "small" | null | undefined;
+  tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string, navigationMenuLinkVariants: (props?: ({
+  size?: "large" | "medium" | "small" | null | undefined;
+  tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string, navigationMenuContentLinkVariants: (props?: ({
+  tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type NavigationMenuLinkProps = VariantProps<typeof navigationMenuLinkVariants> & React.ComponentProps<typeof NavigationMenu$1.Link>;
+type NavigationMenuContentLinkProps = VariantProps<typeof navigationMenuContentLinkVariants> & React.ComponentProps<'div'>;
+declare function NavigationMenu$2({ className, ref, ...props }: NavigationMenuProps): import("react").JSX.Element;
+export declare function NavigationMenuContent({ className, ref, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
+export declare function NavigationMenuContentLink({ tone, className, ref, ...props }: NavigationMenuContentLinkProps): import("react").JSX.Element;
+export declare function NavigationMenuIcon({ className, ref, ...props }: NavigationMenuIconProps): import("react").JSX.Element;
+export declare function NavigationMenuItem({ className, ref, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
+export declare function NavigationMenuLink({ size, tone, className, ref, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+export declare function NavigationMenuList({ className, ref, ...props }: NavigationMenuListProps): import("react").JSX.Element;
+export declare function NavigationMenuPopup({ className, children, ref, ...props }: NavigationMenuPopupProps): import("react").JSX.Element;
+export declare function NavigationMenuTrigger({ size, tone, className, ref, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
+declare const NavigationMenu: typeof NavigationMenu$2 & {
+  Content: typeof NavigationMenuContent;
+  ContentLink: typeof NavigationMenuContentLink;
+  Icon: typeof NavigationMenuIcon;
+  Item: typeof NavigationMenuItem;
+  Link: typeof NavigationMenuLink;
+  List: typeof NavigationMenuList;
+  Popup: typeof NavigationMenuPopup;
+  Trigger: typeof NavigationMenuTrigger;
+};
+export { NavigationMenu, type NavigationMenuContentLinkProps, type NavigationMenuContentProps, type NavigationMenuIconProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuPopupProps, type NavigationMenuProps, type NavigationMenuTriggerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation-menu/index.js

@@ -0,0 +1,176 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react";
+// src/components/navigation-menu/navigation-menu.tsx
+function NavigationMenu$2({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Root, {
+		className: cn("min-w-max", className),
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/navigation-menu-content.tsx
+function NavigationMenuContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		className: cn("h-full w-[calc(100vw-40px)] rounded-xl bg-surface p-2xs transition-[opacity,transform,translate] duration-(--duration) ease-(--easing) data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] min-[500px]:w-max min-[500px]:max-w-[400px]", className),
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/navigation-menu.types.ts
+const navigationMenuItemClasses = "flex items-center justify-center rounded-full bg-transparent no-underline transition-colors select-none hover:cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-1";
+const navigationMenuSizes = {
+	large: "h-2xl gap-xs px-md style-text-default-2 [&>[data-slot=nav-menu-icon]]:ml-md [&>svg]:size-lg",
+	medium: "h-xl gap-2xs px-sm style-text-default-0 [&>[data-slot=nav-menu-icon]]:ml-sm [&>svg]:size-md",
+	small: "h-lg gap-3xs px-xs style-text-default--1 [&>[data-slot=nav-menu-icon]]:ml-xs [&>svg]:size-sm"
+};
+const navigationMenuTriggerVariants = cva(navigationMenuItemClasses, {
+	defaultVariants: {
+		size: "medium",
+		tone: "neutral"
+	},
+	variants: {
+		size: navigationMenuSizes,
+		tone: {
+			accent: "text-accent-default hover:bg-accent-container hover:text-accent-on-container data-popup-open:bg-accent-container data-popup-open:text-accent-on-container",
+			brand: "text-brand-default hover:bg-brand-container hover:text-brand-on-container data-popup-open:bg-brand-container data-popup-open:text-brand-on-container",
+			error: "text-error-default hover:bg-error-container hover:text-error-on-container data-popup-open:bg-error-container data-popup-open:text-error-on-container",
+			info: "text-info-default hover:bg-info-container hover:text-info-on-container data-popup-open:bg-info-container data-popup-open:text-info-on-container",
+			neutral: "text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container data-popup-open:bg-neutral-container data-popup-open:text-neutral-on-container",
+			success: "text-success-default hover:bg-success-container hover:text-success-on-container data-popup-open:bg-success-container data-popup-open:text-success-on-container",
+			warning: "text-warning-default hover:bg-warning-container hover:text-warning-on-container data-popup-open:bg-warning-container data-popup-open:text-warning-on-container"
+		}
+	}
+});
+const navigationMenuLinkVariants = cva(navigationMenuItemClasses, {
+	defaultVariants: {
+		size: "medium",
+		tone: "neutral"
+	},
+	variants: {
+		size: navigationMenuSizes,
+		tone: {
+			accent: "text-accent-default hover:bg-accent-container hover:text-accent-on-container",
+			brand: "text-brand-default hover:bg-brand-container hover:text-brand-on-container",
+			error: "text-error-default hover:bg-error-container hover:text-error-on-container",
+			info: "text-info-default hover:bg-info-container hover:text-info-on-container",
+			neutral: "text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container",
+			success: "text-success-default hover:bg-success-container hover:text-success-on-container",
+			warning: "text-warning-default hover:bg-warning-container hover:text-warning-on-container"
+		}
+	}
+});
+const navigationMenuContentLinkVariants = cva("block rounded-xl px-sm py-xs no-underline transition-colors hover:cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-1", {
+	defaultVariants: { tone: "neutral" },
+	variants: { tone: {
+		accent: "text-accent-on-container hover:bg-accent-container",
+		brand: "text-brand-on-container hover:bg-brand-container",
+		error: "text-error-on-container hover:bg-error-container",
+		info: "text-info-on-container hover:bg-info-container",
+		neutral: "text-neutral-on-container hover:bg-neutral-container",
+		success: "text-success-on-container hover:bg-success-container",
+		warning: "text-warning-on-container hover:bg-warning-container"
+	} }
+});
+// src/components/navigation-menu/navigation-menu-content-link.tsx
+function NavigationMenuContentLink({ tone, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(navigationMenuContentLinkVariants({ tone }), className),
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/navigation-menu-icon.tsx
+function NavigationMenuIcon({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Icon, {
+		"data-slot": "nav-menu-icon",
+		className: cn("transition-transform duration-200 ease-[ease] data-popup-open:rotate-180", className),
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/navigation-menu-item.tsx
+function NavigationMenuItem({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		className: cn("", className),
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/navigation-menu-link.tsx
+function NavigationMenuLink({ size, tone, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		className: (state) => {
+			const classes = navigationMenuLinkVariants({
+				size,
+				tone
+			});
+			if (typeof className === "function") return cn(classes, className(state));
+			return cn(classes, className);
+		},
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/navigation-menu-list.tsx
+function NavigationMenuList({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
+		className: cn("relative flex gap-px", className),
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/navigation-menu-popup.tsx
+function NavigationMenuPopup({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
+		sideOffset: 10,
+		collisionPadding: {
+			bottom: 5,
+			left: 20,
+			right: 20,
+			top: 5
+		},
+		collisionAvoidance: { side: "none" },
+		className: cn("h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute data-instant:transition-none data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:h-2xs data-[side=left]:before:inset-y-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:w-2xs data-[side=right]:before:inset-y-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2xs data-[side=top]:before:inset-x-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:h-2xs", className),
+		ref,
+		style: {
+			["--duration"]: "0.35s",
+			["--easing"]: "cubic-bezier(0.22, 1, 0.36, 1)"
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs(NavigationMenu$1.Popup, {
+			className: "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-xl shadow-md transition-[opacity,transform,width,height,scale] duration-(--duration) ease-(--easing) outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0",
+			children: [
+				/* @__PURE__ */ jsx(NavigationMenu$1.Arrow, { className: "relative block overflow-clip transition-[left,right] duration-(--duration) ease-(--easing) before:absolute before:bottom-0 before:left-1/2 before:block before:size-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180" }),
+				/* @__PURE__ */ jsx(NavigationMenu$1.Viewport, { className: "relative size-full overflow-hidden" }),
+				children
+			]
+		})
+	}) });
+}
+// src/components/navigation-menu/navigation-menu-trigger.tsx
+function NavigationMenuTrigger({ size, tone, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Trigger, {
+		className: cn(navigationMenuTriggerVariants({
+			size,
+			tone
+		}), className),
+		ref,
+		...props
+	});
+}
+// src/components/navigation-menu/index.ts
+const NavigationMenu = Object.assign(NavigationMenu$2, {
+	Content: NavigationMenuContent,
+	ContentLink: NavigationMenuContentLink,
+	Icon: NavigationMenuIcon,
+	Item: NavigationMenuItem,
+	Link: NavigationMenuLink,
+	List: NavigationMenuList,
+	Popup: NavigationMenuPopup,
+	Trigger: NavigationMenuTrigger
+});
+export { NavigationMenu, NavigationMenuContent, NavigationMenuContentLink, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/navigation-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["NavigationMenu","BaseNavigationMenu","BaseNavigationMenu","BaseNavigationMenu","BaseNavigationMenu","BaseNavigationMenu","BaseNavigationMenu","BaseNavigationMenu","BaseNavigationMenu","NavigationMenuRoot"],"sources":["../../src/components/navigation-menu/navigation-menu.tsx","../../src/components/navigation-menu/navigation-menu-content.tsx","../../src/components/navigation-menu/navigation-menu.types.ts","../../src/components/navigation-menu/navigation-menu-content-link.tsx","../../src/components/navigation-menu/navigation-menu-icon.tsx","../../src/components/navigation-menu/navigation-menu-item.tsx","../../src/components/navigation-menu/navigation-menu-link.tsx","../../src/components/navigation-menu/navigation-menu-list.tsx","../../src/components/navigation-menu/navigation-menu-popup.tsx","../../src/components/navigation-menu/navigation-menu-trigger.tsx","../../src/components/navigation-menu/index.ts"],"sourcesContent":["import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { NavigationMenuProps } from './navigation-menu.types'\n\nexport function NavigationMenu({ className, ref, ...props }: NavigationMenuProps) {\n  return <BaseNavigationMenu.Root className={cn('min-w-max', className)} ref={ref} {...props} />\n}\n","import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { NavigationMenuContentProps } from './navigation-menu.types'\n\nexport function NavigationMenuContent({ className, ref, ...props }: NavigationMenuContentProps) {\n  return (\n    <BaseNavigationMenu.Content\n      className={cn(\n        'h-full w-[calc(100vw-40px)] rounded-xl bg-surface p-2xs transition-[opacity,transform,translate] duration-(--duration) ease-(--easing) data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] min-[500px]:w-max min-[500px]:max-w-[400px]',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import type { NavigationMenu } from '@base-ui/react'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\ntype NavigationMenuProps = React.ComponentProps<typeof NavigationMenu.Root>\ntype NavigationMenuListProps = React.ComponentProps<typeof NavigationMenu.List>\ntype NavigationMenuItemProps = React.ComponentProps<typeof NavigationMenu.Item>\ntype NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenu.Trigger> &\n  VariantProps<typeof navigationMenuTriggerVariants> & { isActive?: boolean }\ntype NavigationMenuIconProps = React.ComponentProps<typeof NavigationMenu.Icon>\ntype NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenu.Content>\ntype NavigationMenuPopupProps = React.ComponentProps<typeof NavigationMenu.Positioner>\n\nconst navigationMenuItemClasses =\n    'flex items-center justify-center rounded-full bg-transparent no-underline transition-colors select-none hover:cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-1',\n  navigationMenuSizes = {\n    large:\n      'h-2xl gap-xs px-md style-text-default-2 [&>[data-slot=nav-menu-icon]]:ml-md [&>svg]:size-lg',\n    medium:\n      'h-xl gap-2xs px-sm style-text-default-0 [&>[data-slot=nav-menu-icon]]:ml-sm [&>svg]:size-md',\n    small:\n      'h-lg gap-3xs px-xs style-text-default--1 [&>[data-slot=nav-menu-icon]]:ml-xs [&>svg]:size-sm',\n  },\n  navigationMenuTriggerVariants = cva(navigationMenuItemClasses, {\n    defaultVariants: {\n      size: 'medium',\n      tone: 'neutral',\n    },\n    variants: {\n      size: navigationMenuSizes,\n      tone: {\n        accent:\n          'text-accent-default hover:bg-accent-container hover:text-accent-on-container data-popup-open:bg-accent-container data-popup-open:text-accent-on-container',\n        brand:\n          'text-brand-default hover:bg-brand-container hover:text-brand-on-container data-popup-open:bg-brand-container data-popup-open:text-brand-on-container',\n        error:\n          'text-error-default hover:bg-error-container hover:text-error-on-container data-popup-open:bg-error-container data-popup-open:text-error-on-container',\n        info: 'text-info-default hover:bg-info-container hover:text-info-on-container data-popup-open:bg-info-container data-popup-open:text-info-on-container',\n        neutral:\n          'text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container data-popup-open:bg-neutral-container data-popup-open:text-neutral-on-container',\n        success:\n          'text-success-default hover:bg-success-container hover:text-success-on-container data-popup-open:bg-success-container data-popup-open:text-success-on-container',\n        warning:\n          'text-warning-default hover:bg-warning-container hover:text-warning-on-container data-popup-open:bg-warning-container data-popup-open:text-warning-on-container',\n      },\n    },\n  }),\n  navigationMenuLinkVariants = cva(navigationMenuItemClasses, {\n    defaultVariants: {\n      size: 'medium',\n      tone: 'neutral',\n    },\n    variants: {\n      size: navigationMenuSizes,\n      tone: {\n        accent: 'text-accent-default hover:bg-accent-container hover:text-accent-on-container',\n        brand: 'text-brand-default hover:bg-brand-container hover:text-brand-on-container',\n        error: 'text-error-default hover:bg-error-container hover:text-error-on-container',\n        info: 'text-info-default hover:bg-info-container hover:text-info-on-container',\n        neutral: 'text-neutral-default hover:bg-neutral-container hover:text-neutral-on-container',\n        success: 'text-success-default hover:bg-success-container hover:text-success-on-container',\n        warning: 'text-warning-default hover:bg-warning-container hover:text-warning-on-container',\n      },\n    },\n  }),\n  navigationMenuContentLinkVariants = cva(\n    'block rounded-xl px-sm py-xs no-underline transition-colors hover:cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-1',\n    {\n      defaultVariants: {\n        tone: 'neutral',\n      },\n      variants: {\n        tone: {\n          accent: 'text-accent-on-container hover:bg-accent-container',\n          brand: 'text-brand-on-container hover:bg-brand-container',\n          error: 'text-error-on-container hover:bg-error-container',\n          info: 'text-info-on-container hover:bg-info-container',\n          neutral: 'text-neutral-on-container hover:bg-neutral-container',\n          success: 'text-success-on-container hover:bg-success-container',\n          warning: 'text-warning-on-container hover:bg-warning-container',\n        },\n      },\n    },\n  )\n\ntype NavigationMenuLinkProps = VariantProps<typeof navigationMenuLinkVariants> &\n  React.ComponentProps<typeof NavigationMenu.Link>\ntype NavigationMenuContentLinkProps = VariantProps<typeof navigationMenuContentLinkVariants> &\n  React.ComponentProps<'div'>\n\nexport type {\n  NavigationMenuProps,\n  NavigationMenuListProps,\n  NavigationMenuItemProps,\n  NavigationMenuTriggerProps,\n  NavigationMenuIconProps,\n  NavigationMenuContentProps,\n  NavigationMenuContentLinkProps,\n  NavigationMenuPopupProps,\n  NavigationMenuLinkProps,\n}\nexport {\n  navigationMenuContentLinkVariants,\n  navigationMenuLinkVariants,\n  navigationMenuTriggerVariants,\n}\n","import { cn } from '@/utils/cn'\n\nimport { navigationMenuContentLinkVariants } from './navigation-menu.types'\nimport type { NavigationMenuContentLinkProps } from './navigation-menu.types'\n\nexport function NavigationMenuContentLink({\n  tone,\n  className,\n  ref,\n  ...props\n}: NavigationMenuContentLinkProps) {\n  return (\n    <div\n      className={cn(navigationMenuContentLinkVariants({ tone }), className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { NavigationMenuIconProps } from './navigation-menu.types'\n\nexport function NavigationMenuIcon({ className, ref, ...props }: NavigationMenuIconProps) {\n  return (\n    <BaseNavigationMenu.Icon\n      data-slot=\"nav-menu-icon\"\n      className={cn(\n        'transition-transform duration-200 ease-[ease] data-popup-open:rotate-180',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { NavigationMenuItemProps } from './navigation-menu.types'\n\nexport function NavigationMenuItem({ className, ref, ...props }: NavigationMenuItemProps) {\n  return <BaseNavigationMenu.Item className={cn('', className)} ref={ref} {...props} />\n}\n","import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { navigationMenuLinkVariants } from './navigation-menu.types'\nimport type { NavigationMenuLinkProps } from './navigation-menu.types'\n\nexport function NavigationMenuLink({\n  size,\n  tone,\n  className,\n  ref,\n  ...props\n}: NavigationMenuLinkProps) {\n  return (\n    <BaseNavigationMenu.Link\n      className={(state) => {\n        const classes = navigationMenuLinkVariants({ size, tone })\n        if (typeof className === 'function') {\n          return cn(classes, className(state))\n        }\n        return cn(classes, className)\n      }}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { NavigationMenuListProps } from './navigation-menu.types'\n\nexport function NavigationMenuList({ className, ref, ...props }: NavigationMenuListProps) {\n  return (\n    <BaseNavigationMenu.List\n      className={cn('relative flex gap-px', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { NavigationMenuPopupProps } from './navigation-menu.types'\n\nexport function NavigationMenuPopup({\n  className,\n  children,\n  ref,\n  ...props\n}: NavigationMenuPopupProps) {\n  return (\n    <BaseNavigationMenu.Portal>\n      <BaseNavigationMenu.Positioner\n        sideOffset={10}\n        collisionPadding={{ bottom: 5, left: 20, right: 20, top: 5 }}\n        collisionAvoidance={{ side: 'none' }}\n        className={cn(\n          'h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute data-instant:transition-none data-[side=bottom]:before:inset-x-0 data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:h-2xs data-[side=left]:before:inset-y-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:w-2xs data-[side=right]:before:inset-y-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2xs data-[side=top]:before:inset-x-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:h-2xs',\n          className,\n        )}\n        ref={ref}\n        style={{\n          ['--duration' as string]: '0.35s',\n          ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',\n        }}\n        {...props}\n      >\n        <BaseNavigationMenu.Popup className=\"relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-xl shadow-md transition-[opacity,transform,width,height,scale] duration-(--duration) ease-(--easing) outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <BaseNavigationMenu.Arrow className=\"relative block overflow-clip transition-[left,right] duration-(--duration) ease-(--easing) before:absolute before:bottom-0 before:left-1/2 before:block before:size-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180\" />\n          <BaseNavigationMenu.Viewport className=\"relative size-full overflow-hidden\" />\n          {children}\n        </BaseNavigationMenu.Popup>\n      </BaseNavigationMenu.Positioner>\n    </BaseNavigationMenu.Portal>\n  )\n}\n","import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { navigationMenuTriggerVariants } from './navigation-menu.types'\nimport type { NavigationMenuTriggerProps } from './navigation-menu.types'\n\nexport function NavigationMenuTrigger({\n  size,\n  tone,\n  className,\n  ref,\n  ...props\n}: NavigationMenuTriggerProps) {\n  return (\n    <BaseNavigationMenu.Trigger\n      className={cn(navigationMenuTriggerVariants({ size, tone }), className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { NavigationMenu as NavigationMenuRoot } from './navigation-menu'\nimport { NavigationMenuContent } from './navigation-menu-content'\nimport { NavigationMenuContentLink } from './navigation-menu-content-link'\nimport { NavigationMenuIcon } from './navigation-menu-icon'\nimport { NavigationMenuItem } from './navigation-menu-item'\nimport { NavigationMenuLink } from './navigation-menu-link'\nimport { NavigationMenuList } from './navigation-menu-list'\nimport { NavigationMenuPopup } from './navigation-menu-popup'\nimport { NavigationMenuTrigger } from './navigation-menu-trigger'\n\nconst NavigationMenu = Object.assign(NavigationMenuRoot, {\n  Content: NavigationMenuContent,\n  ContentLink: NavigationMenuContentLink,\n  Icon: NavigationMenuIcon,\n  Item: NavigationMenuItem,\n  Link: NavigationMenuLink,\n  List: NavigationMenuList,\n  Popup: NavigationMenuPopup,\n  Trigger: NavigationMenuTrigger,\n})\n\nexport type {\n  NavigationMenuContentLinkProps,\n  NavigationMenuContentProps,\n  NavigationMenuIconProps,\n  NavigationMenuItemProps,\n  NavigationMenuLinkProps,\n  NavigationMenuListProps,\n  NavigationMenuPopupProps,\n  NavigationMenuProps,\n  NavigationMenuTriggerProps,\n} from './navigation-menu.types'\n\nexport { NavigationMenuContent } from './navigation-menu-content'\nexport { NavigationMenuContentLink } from './navigation-menu-content-link'\nexport { NavigationMenuIcon } from './navigation-menu-icon'\nexport { NavigationMenuItem } from './navigation-menu-item'\nexport { NavigationMenuLink } from './navigation-menu-link'\nexport { NavigationMenuList } from './navigation-menu-list'\nexport { NavigationMenuPopup } from './navigation-menu-popup'\nexport { NavigationMenuTrigger } from './navigation-menu-trigger'\n\nexport { NavigationMenu }\n"],"mappings":"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"}

package/dist/number-field/index.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from "class-variance-authority";
+import React$1 from "react";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+declare const numberFieldVariants: (props?: ({
+  size?: "large" | "medium" | "small" | null | undefined;
+  variant?: "ghost" | "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type NumberFieldTypesProps = React.ComponentProps<typeof NumberField$1.Root> & VariantProps<typeof numberFieldVariants> & {
+  label?: string;
+  disableInput?: boolean;
+};
+declare function NumberField({ size, variant, children, label, disableInput: disabledInput, className, ref, ...props }: NumberFieldTypesProps): React$1.JSX.Element;
+export { NumberField, type NumberFieldTypesProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/number-field/index.js

@@ -0,0 +1,116 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { n as Icon } from "../icon-D3JWfCa2.js";
+import { t as Button } from "../button-BpUC-R1J.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+// src/components/number-field/number-field.types.ts
+const numberFieldVariants = cva("flex flex-col gap-3xs data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_[role=\"group\"]]:rounded-full [&_[role=\"group\"]]:outline [&_[role=\"group\"]]:outline-transparent [&_[role=\"group\"]]:transition-all aria-invalid:[&_[role=\"group\"]]:bg-error-container aria-invalid:[&_[role=\"group\"]]:outline-error-border aria-invalid:[&_[role=\"group\"]]:focus-within:outline-error-border-strong aria-invalid:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border data-[disabled]:[&_[role=\"group\"]]:cursor-not-allowed data-[invalid]:[&_[role=\"group\"]]:bg-error-container data-[invalid]:[&_[role=\"group\"]]:outline-error-border data-[invalid]:[&_[role=\"group\"]]:focus-within:outline-error-border-strong data-[invalid]:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border aria-invalid:[&_input]:text-error-on-container aria-invalid:[&_input]:caret-error-border-strong data-invalid:[&_input]:text-error-on-container data-invalid:[&_input]:caret-error-border-strong", {
+	defaultVariants: {
+		size: "medium",
+		variant: "primary"
+	},
+	variants: {
+		size: {
+			large: "[&_[role=\"group\"]]:h-2xl [&_input]:style-text-default-1",
+			medium: "[&_[role=\"group\"]]:h-xl [&_input]:style-text-default-0",
+			small: "[&_[role=\"group\"]]:h-lg [&_input]:style-text-default--1"
+		},
+		variant: {
+			ghost: "",
+			primary: "[&_[role=\"group\"]]:bg-surface [&_[role=\"group\"]]:shadow-2xs",
+			secondary: "[&_[role=\"group\"]]:bg-neutral-container"
+		}
+	}
+});
+// src/components/number-field/number-field.tsx
+function getCurrentValue(value, uncontrolledValue) {
+	if (typeof value === "number" || value === null) return value;
+	return uncontrolledValue;
+}
+function getInvalidAttribute(isInvalid) {
+	if (isInvalid) return "";
+}
+function getInputLabel(label) {
+	if (typeof label === "string") return label;
+	return "Number value";
+}
+function NumberField({ size, variant, children, label, disableInput: disabledInput = false, className, ref, ...props }) {
+	const id = React.useId(), { min, max, value, defaultValue, onValueChange, "aria-invalid": ariaInvalid, ...restProps } = props, [uncontrolledValue, setUncontrolledValue] = React.useState(() => {
+		if (typeof defaultValue === "number") return defaultValue;
+	}), currentValue = getCurrentValue(value, uncontrolledValue), mergedAriaInvalid = Boolean(ariaInvalid || typeof currentValue === "number" && (typeof min === "number" && currentValue < min || typeof max === "number" && currentValue > max)), handleValueChange = (...args) => {
+		const [nextValue] = args;
+		if (typeof value !== "number" && value !== null) setUncontrolledValue(nextValue ?? void 0);
+		onValueChange?.(...args);
+	};
+	return /* @__PURE__ */ jsxs(NumberField$1.Root, {
+		className: cn(numberFieldVariants({
+			className,
+			size,
+			variant
+		})),
+		ref,
+		"aria-invalid": mergedAriaInvalid,
+		"data-invalid": getInvalidAttribute(mergedAriaInvalid),
+		defaultValue,
+		id,
+		max,
+		min,
+		onValueChange: handleValueChange,
+		value,
+		...restProps,
+		children: [label && /* @__PURE__ */ jsxs(NumberField$1.ScrubArea, {
+			className: "cursor-ew-resize",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "cursor-ew-resize style-text-default--1",
+				htmlFor: id,
+				children: label
+			}), /* @__PURE__ */ jsx(NumberField$1.ScrubAreaCursor, { children: /* @__PURE__ */ jsx(CursorGrowIcon, {}) })]
+		}), /* @__PURE__ */ jsxs(NumberField$1.Group, {
+			className: "relative flex w-full items-center gap-3xs",
+			children: [
+				/* @__PURE__ */ jsx(NumberField$1.Decrement, { render: (stepperProps) => /* @__PURE__ */ jsx(Button, {
+					...stepperProps,
+					tone: "error",
+					variant: "ghost",
+					size: size ?? "medium",
+					className: "shrink-0 rounded-r-none",
+					children: /* @__PURE__ */ jsx(Icon, { name: "minus" })
+				}) }),
+				/* @__PURE__ */ jsx(NumberField$1.Input, {
+					"aria-label": getInputLabel(label),
+					disabled: disabledInput,
+					className: cn("w-full text-center focus:outline-none", children && "text-right")
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: cn("w-full text-left text-on-surface-variant", size === "small" && "style-text-default--1", size === "medium" && "style-text-default-0", size === "large" && "style-text-default-1"),
+					children
+				}),
+				/* @__PURE__ */ jsx(NumberField$1.Increment, { render: (stepperProps) => /* @__PURE__ */ jsx(Button, {
+					...stepperProps,
+					tone: "success",
+					variant: "ghost",
+					size: size ?? "medium",
+					className: "shrink-0 rounded-l-none",
+					children: /* @__PURE__ */ jsx(Icon, { name: "add" })
+				}) })
+			]
+		})]
+	});
+}
+function CursorGrowIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		fill: "black",
+		height: "14",
+		stroke: "white",
+		viewBox: "0 0 24 14",
+		width: "26",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: [/* @__PURE__ */ jsx("title", { children: "Resize cursor" }), /* @__PURE__ */ jsx("path", { d: "M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" })]
+	});
+}
+export { NumberField };
+
+//# sourceMappingURL=index.js.map

package/dist/number-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BaseNumberField"],"sources":["../../src/components/number-field/number-field.types.ts","../../src/components/number-field/number-field.tsx"],"sourcesContent":["import type { NumberField as BaseNumberField } from '@base-ui/react/number-field'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nexport const numberFieldVariants = cva(\n  'flex flex-col gap-3xs data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_[role=\"group\"]]:rounded-full [&_[role=\"group\"]]:outline [&_[role=\"group\"]]:outline-transparent [&_[role=\"group\"]]:transition-all aria-invalid:[&_[role=\"group\"]]:bg-error-container aria-invalid:[&_[role=\"group\"]]:outline-error-border aria-invalid:[&_[role=\"group\"]]:focus-within:outline-error-border-strong aria-invalid:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border data-[disabled]:[&_[role=\"group\"]]:cursor-not-allowed data-[invalid]:[&_[role=\"group\"]]:bg-error-container data-[invalid]:[&_[role=\"group\"]]:outline-error-border data-[invalid]:[&_[role=\"group\"]]:focus-within:outline-error-border-strong data-[invalid]:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border aria-invalid:[&_input]:text-error-on-container aria-invalid:[&_input]:caret-error-border-strong data-invalid:[&_input]:text-error-on-container data-invalid:[&_input]:caret-error-border-strong',\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'primary',\n    },\n    variants: {\n      size: {\n        large: '[&_[role=\"group\"]]:h-2xl [&_input]:style-text-default-1',\n        medium: '[&_[role=\"group\"]]:h-xl [&_input]:style-text-default-0',\n        small: '[&_[role=\"group\"]]:h-lg [&_input]:style-text-default--1',\n      },\n      variant: {\n        ghost: '',\n        primary: '[&_[role=\"group\"]]:bg-surface [&_[role=\"group\"]]:shadow-2xs',\n        secondary: '[&_[role=\"group\"]]:bg-neutral-container',\n      },\n    },\n  },\n)\n\nexport type NumberFieldTypesProps = React.ComponentProps<typeof BaseNumberField.Root> &\n  VariantProps<typeof numberFieldVariants> & {\n    label?: string\n    disableInput?: boolean\n  }\n","import { NumberField as BaseNumberField } from '@base-ui/react/number-field'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { numberFieldVariants } from './number-field.types'\nimport type { NumberFieldTypesProps } from './number-field.types'\n\nfunction getCurrentValue(value: number | null | undefined, uncontrolledValue: number | undefined) {\n  if (typeof value === 'number' || value === null) {\n    return value\n  }\n  return uncontrolledValue\n}\n\nfunction getInvalidAttribute(isInvalid: boolean): string | undefined {\n  if (isInvalid) {\n    return ''\n  }\n  return undefined\n}\n\nfunction getInputLabel(label: React.ReactNode): string {\n  if (typeof label === 'string') {\n    return label\n  }\n  return 'Number value'\n}\n\nfunction NumberField({\n  size,\n  variant,\n  children,\n  label,\n  disableInput: disabledInput = false,\n  className,\n  ref,\n  ...props\n}: NumberFieldTypesProps) {\n  const id = React.useId(),\n    {\n      min,\n      max,\n      value,\n      defaultValue,\n      onValueChange,\n      'aria-invalid': ariaInvalid,\n      ...restProps\n    } = props,\n    [uncontrolledValue, setUncontrolledValue] = React.useState<number | undefined>(() => {\n      if (typeof defaultValue === 'number') {\n        return defaultValue\n      }\n\n      return undefined\n    }),\n    currentValue = getCurrentValue(value, uncontrolledValue),\n    isOutOfRange =\n      typeof currentValue === 'number' &&\n      ((typeof min === 'number' && currentValue < min) ||\n        (typeof max === 'number' && currentValue > max)),\n    mergedAriaInvalid = Boolean(ariaInvalid || isOutOfRange),\n    handleValueChange: NumberFieldTypesProps['onValueChange'] = (...args) => {\n      const [nextValue] = args\n\n      if (typeof value !== 'number' && value !== null) {\n        setUncontrolledValue(nextValue ?? undefined)\n      }\n\n      onValueChange?.(...args)\n    }\n\n  return (\n    <BaseNumberField.Root\n      className={cn(numberFieldVariants({ className, size, variant }))}\n      ref={ref}\n      aria-invalid={mergedAriaInvalid}\n      data-invalid={getInvalidAttribute(mergedAriaInvalid)}\n      defaultValue={defaultValue}\n      id={id}\n      max={max}\n      min={min}\n      onValueChange={handleValueChange}\n      value={value}\n      {...restProps}\n    >\n      {label && (\n        <BaseNumberField.ScrubArea className=\"cursor-ew-resize\">\n          <label className=\"cursor-ew-resize style-text-default--1\" htmlFor={id}>\n            {label}\n          </label>\n          <BaseNumberField.ScrubAreaCursor>\n            <CursorGrowIcon />\n          </BaseNumberField.ScrubAreaCursor>\n        </BaseNumberField.ScrubArea>\n      )}\n      <BaseNumberField.Group className=\"relative flex w-full items-center gap-3xs\">\n        <BaseNumberField.Decrement\n          render={(stepperProps) => (\n            <Button\n              {...stepperProps}\n              tone=\"error\"\n              variant=\"ghost\"\n              size={size ?? 'medium'}\n              className=\"shrink-0 rounded-r-none\"\n            >\n              <Icon name=\"minus\" />\n            </Button>\n          )}\n        />\n        <BaseNumberField.Input\n          aria-label={getInputLabel(label)}\n          disabled={disabledInput}\n          className={cn('w-full text-center focus:outline-none', children && 'text-right')}\n        />\n        {children && (\n          <div\n            className={cn(\n              'w-full text-left text-on-surface-variant',\n              size === 'small' && 'style-text-default--1',\n              size === 'medium' && 'style-text-default-0',\n              size === 'large' && 'style-text-default-1',\n            )}\n          >\n            {children}\n          </div>\n        )}\n        <BaseNumberField.Increment\n          render={(stepperProps) => (\n            <Button\n              {...stepperProps}\n              tone=\"success\"\n              variant=\"ghost\"\n              size={size ?? 'medium'}\n              className=\"shrink-0 rounded-l-none\"\n            >\n              <Icon name=\"add\" />\n            </Button>\n          )}\n        />\n      </BaseNumberField.Group>\n    </BaseNumberField.Root>\n  )\n}\n\nfunction CursorGrowIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Resize cursor</title>\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  )\n}\n\nexport { NumberField }\n"],"mappings":"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"}