@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/card-DOnx7RKz.d.mts

@@ -0,0 +1,60 @@
+//#region packages/components/ui/card.d.ts
+/**
+ * Surface container for grouping related content with a bordered, shadowed panel that supports optional interactive hover states.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Card, CardHeader, CardTitle, CardDescription,
+ *   CardContent, CardFooter, CardAction,
+ * } from '@customafk/lunas-ui/ui/card';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Plan overview</CardTitle>
+ *     <CardDescription>Your current subscription details.</CardDescription>
+ *     <CardAction><Button size="sm">Upgrade</Button></CardAction>
+ *   </CardHeader>
+ *   <CardContent>Monthly usage: 42 / 100 requests</CardContent>
+ *   <CardFooter>Renews on 1 Jun 2026</CardFooter>
+ * </Card>
+ * ```
+ */
+declare function Card({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Top section of the card that holds the title, description, and optional action slot. */
+declare function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Primary heading for the card, styled with the h3 heading variant. */
+declare function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Muted supporting text displayed beneath the card title. */
+declare function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Optional slot in the card header for a contextual action (e.g. a button or menu); positioned in the top-right grid cell. */
+declare function CardAction({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Main body area of the card with horizontal padding for content alignment. */
+declare function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Bottom section of the card, typically used for supplementary text or secondary actions. */
+declare function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { CardFooter as a, CardDescription as i, CardAction as n, CardHeader as o, CardContent as r, CardTitle as s, Card as t };
+//# sourceMappingURL=card-DOnx7RKz.d.mts.map

package/dist/cards/grid-product-card.d.cts

@@ -1,30 +1,2 @@
-//#region packages/components/cards/grid-product-card.d.ts
-type Props = {
-  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
-  slug: string; /** Display name of the product shown on the card. */
-  name: string; /** URL of the product's thumbnail image. */
-  thumbnail: string; /** Regular price of the product in VND. */
-  price: number; /** Optional sale / discounted price in VND. */
-  salePrice?: number; /** Optional sale discount percentage (0–100). */
-  salePercentage?: number;
-};
-/**
- * A horizontal (grid-row) product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.
- *
- * @example
- * ```tsx
- * import { GridProductCard } from '@customafk/lunas-ui/cards/grid-product-card';
- *
- * <GridProductCard
- *   id="prod-1"
- *   slug="awesome-widget"
- *   name="Awesome Widget"
- *   thumbnail="/images/widget.png"
- *   price={299000}
- * />
- * ```
- */
-declare const GridProductCard: React.FC<Props>;
-//#endregion
-export { GridProductCard };
-//# sourceMappingURL=grid-product-card.d.cts.map
+import { t as GridProductCard } from "../grid-product-card-bpADqDOQ.cjs";
+export { GridProductCard };

package/dist/cards/grid-product-card.d.mts

@@ -1,30 +1,2 @@
-//#region packages/components/cards/grid-product-card.d.ts
-type Props = {
-  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
-  slug: string; /** Display name of the product shown on the card. */
-  name: string; /** URL of the product's thumbnail image. */
-  thumbnail: string; /** Regular price of the product in VND. */
-  price: number; /** Optional sale / discounted price in VND. */
-  salePrice?: number; /** Optional sale discount percentage (0–100). */
-  salePercentage?: number;
-};
-/**
- * A horizontal (grid-row) product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.
- *
- * @example
- * ```tsx
- * import { GridProductCard } from '@customafk/lunas-ui/cards/grid-product-card';
- *
- * <GridProductCard
- *   id="prod-1"
- *   slug="awesome-widget"
- *   name="Awesome Widget"
- *   thumbnail="/images/widget.png"
- *   price={299000}
- * />
- * ```
- */
-declare const GridProductCard: React.FC<Props>;
-//#endregion
-export { GridProductCard };
-//# sourceMappingURL=grid-product-card.d.mts.map
+import { t as GridProductCard } from "../grid-product-card-bpADqDOQ.mjs";
+export { GridProductCard };

package/dist/cards/product-card.d.cts

@@ -1,30 +1,2 @@
-//#region packages/components/cards/product-card.d.ts
-type Props = {
-  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
-  slug: string; /** Display name of the product shown on the card. */
-  name: string; /** URL of the product's thumbnail image. */
-  thumbnail: string; /** Regular price of the product in VND. */
-  price: number; /** Optional sale / discounted price in VND. */
-  salePrice?: number; /** Optional sale discount percentage (0–100). */
-  salePercentage?: number;
-};
-/**
- * A vertical product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.
- *
- * @example
- * ```tsx
- * import { ProductCard } from '@customafk/lunas-ui/cards/product-card';
- *
- * <ProductCard
- *   id="prod-1"
- *   slug="awesome-widget"
- *   name="Awesome Widget"
- *   thumbnail="/images/widget.png"
- *   price={299000}
- * />
- * ```
- */
-declare const ProductCard: React.FC<Props>;
-//#endregion
-export { ProductCard };
-//# sourceMappingURL=product-card.d.cts.map
+import { t as ProductCard } from "../product-card-CvXLXbpV.cjs";
+export { ProductCard };

package/dist/cards/product-card.d.mts

@@ -1,30 +1,2 @@
-//#region packages/components/cards/product-card.d.ts
-type Props = {
-  /** Unique identifier for the product. */id: string; /** URL-friendly slug for the product. */
-  slug: string; /** Display name of the product shown on the card. */
-  name: string; /** URL of the product's thumbnail image. */
-  thumbnail: string; /** Regular price of the product in VND. */
-  price: number; /** Optional sale / discounted price in VND. */
-  salePrice?: number; /** Optional sale discount percentage (0–100). */
-  salePercentage?: number;
-};
-/**
- * A vertical product card displaying a thumbnail, name, price, and add-to-cart / favourite actions.
- *
- * @example
- * ```tsx
- * import { ProductCard } from '@customafk/lunas-ui/cards/product-card';
- *
- * <ProductCard
- *   id="prod-1"
- *   slug="awesome-widget"
- *   name="Awesome Widget"
- *   thumbnail="/images/widget.png"
- *   price={299000}
- * />
- * ```
- */
-declare const ProductCard: React.FC<Props>;
-//#endregion
-export { ProductCard };
-//# sourceMappingURL=product-card.d.mts.map
+import { t as ProductCard } from "../product-card-CvXLXbpV.mjs";
+export { ProductCard };

package/dist/cards/simple-card.d.cts

@@ -1,29 +1,2 @@
-//#region packages/components/cards/simple-card.d.ts
-type Props = {
-  /** The card's heading text displayed in the header. */title: string; /** Optional subtitle or description shown below the title. */
-  description?: string; /** Optional node rendered as a card action (e.g. a button) in the header. */
-  action?: React.ReactNode; /** Optional node rendered inside the card footer. */
-  footer?: React.ReactNode;
-};
-/**
- * A general-purpose card with a header, optional description, action slot, content area, and footer.
- *
- * @example
- * ```tsx
- * import { SimpleCard } from '@customafk/lunas-ui/cards/simple-card';
- *
- * <SimpleCard title="Summary" description="Overview of results">
- *   <p>Card body content goes here.</p>
- * </SimpleCard>
- * ```
- */
-declare const SimpleCard: ({
-  title,
-  description,
-  action,
-  footer,
-  children
-}: React.PropsWithChildren<Props>) => import("react").JSX.Element;
-//#endregion
-export { SimpleCard };
-//# sourceMappingURL=simple-card.d.cts.map
+import { t as SimpleCard } from "../simple-card-6P377r4A.cjs";
+export { SimpleCard };

package/dist/cards/simple-card.d.mts

@@ -1,29 +1,2 @@
-//#region packages/components/cards/simple-card.d.ts
-type Props = {
-  /** The card's heading text displayed in the header. */title: string; /** Optional subtitle or description shown below the title. */
-  description?: string; /** Optional node rendered as a card action (e.g. a button) in the header. */
-  action?: React.ReactNode; /** Optional node rendered inside the card footer. */
-  footer?: React.ReactNode;
-};
-/**
- * A general-purpose card with a header, optional description, action slot, content area, and footer.
- *
- * @example
- * ```tsx
- * import { SimpleCard } from '@customafk/lunas-ui/cards/simple-card';
- *
- * <SimpleCard title="Summary" description="Overview of results">
- *   <p>Card body content goes here.</p>
- * </SimpleCard>
- * ```
- */
-declare const SimpleCard: ({
-  title,
-  description,
-  action,
-  footer,
-  children
-}: React.PropsWithChildren<Props>) => import("react").JSX.Element;
-//#endregion
-export { SimpleCard };
-//# sourceMappingURL=simple-card.d.mts.map
+import { t as SimpleCard } from "../simple-card-6P377r4A.mjs";
+export { SimpleCard };

package/dist/carousel-CV3IZ96x.d.mts

@@ -0,0 +1,70 @@
+import { t as Button } from "./button-Bk4Y6_9I.mjs";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+
+//#region packages/components/ui/carousel.d.ts
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+/**
+ * Embla-powered carousel that supports horizontal and vertical orientations with keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Carousel, CarouselContent, CarouselItem,
+ *   CarouselPrevious, CarouselNext,
+ * } from '@customafk/lunas-ui/ui/carousel';
+ *
+ * <Carousel>
+ *   <CarouselContent>
+ *     <CarouselItem>Slide 1</CarouselItem>
+ *     <CarouselItem>Slide 2</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious />
+ *   <CarouselNext />
+ * </Carousel>
+ * ```
+ */
+declare function Carousel({
+  orientation,
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps): import("react").JSX.Element;
+/** The scrollable track that holds all CarouselItem elements. */
+declare function CarouselContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */
+declare function CarouselItem({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */
+declare function CarouselPrevious({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button>): import("react").JSX.Element;
+/** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */
+declare function CarouselNext({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button>): import("react").JSX.Element;
+//#endregion
+export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
+//# sourceMappingURL=carousel-CV3IZ96x.d.mts.map

package/dist/carousel-c2XuzmYN.d.cts

@@ -0,0 +1,70 @@
+import { t as Button } from "./button-Bk4Y6_9I.cjs";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+
+//#region packages/components/ui/carousel.d.ts
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+/**
+ * Embla-powered carousel that supports horizontal and vertical orientations with keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Carousel, CarouselContent, CarouselItem,
+ *   CarouselPrevious, CarouselNext,
+ * } from '@customafk/lunas-ui/ui/carousel';
+ *
+ * <Carousel>
+ *   <CarouselContent>
+ *     <CarouselItem>Slide 1</CarouselItem>
+ *     <CarouselItem>Slide 2</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious />
+ *   <CarouselNext />
+ * </Carousel>
+ * ```
+ */
+declare function Carousel({
+  orientation,
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & CarouselProps): import("react").JSX.Element;
+/** The scrollable track that holds all CarouselItem elements. */
+declare function CarouselContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** A single slide within a CarouselContent; occupies the full width (or height for vertical carousels). */
+declare function CarouselItem({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Circular button positioned to the left (or top for vertical) that scrolls to the previous slide. */
+declare function CarouselPrevious({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button>): import("react").JSX.Element;
+/** Circular button positioned to the right (or bottom for vertical) that scrolls to the next slide. */
+declare function CarouselNext({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button>): import("react").JSX.Element;
+//#endregion
+export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
+//# sourceMappingURL=carousel-c2XuzmYN.d.cts.map

package/dist/chart-sYFksFMk.d.cts

@@ -0,0 +1,80 @@
+import { LegendPayload, ResponsiveContainer, Tooltip, TooltipContentProps } from "recharts";
+
+//#region packages/components/ui/chart.d.ts
+declare const THEMES: {
+  readonly light: "";
+  readonly dark: ".dark";
+};
+type ChartConfig = { [k in string]: {
+  label?: React.ReactNode;
+  icon?: React.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
+}) };
+type ChartContextProps = {
+  config: ChartConfig;
+};
+declare const useChart: () => ChartContextProps;
+type ChartContainerProps = React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof ResponsiveContainer>['children'];
+};
+declare const ChartContainer: ({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: ChartContainerProps) => import("react").JSX.Element;
+declare const ChartStyle: ({
+  id,
+  config
+}: {
+  id: string;
+  config: ChartConfig;
+}) => import("react").JSX.Element | null;
+declare const ChartTooltip: typeof Tooltip;
+type ChartTooltipContentProps = React.ComponentProps<'div'> & Partial<Pick<TooltipContentProps<number | string, string>, 'active' | 'payload' | 'label' | 'labelFormatter' | 'formatter'>> & {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: 'line' | 'dot' | 'dashed';
+  nameKey?: string;
+  labelKey?: string;
+  labelClassName?: string;
+};
+declare const ChartTooltipContent: ({
+  active,
+  payload,
+  className,
+  indicator,
+  hideLabel,
+  hideIndicator,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}: ChartTooltipContentProps) => import("react").JSX.Element | null;
+declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
+type ChartLegendContentProps = React.ComponentProps<'div'> & {
+  payload?: readonly LegendPayload[];
+  verticalAlign?: 'top' | 'bottom' | 'middle';
+  hideIcon?: boolean;
+  nameKey?: string;
+};
+declare const ChartLegendContent: ({
+  className,
+  hideIcon,
+  payload,
+  verticalAlign,
+  nameKey
+}: ChartLegendContentProps) => import("react").JSX.Element | null;
+//#endregion
+export { ChartLegendContent as a, ChartTooltip as c, useChart as d, ChartLegend as i, ChartTooltipContent as l, ChartContainer as n, ChartLegendContentProps as o, ChartContainerProps as r, ChartStyle as s, ChartConfig as t, ChartTooltipContentProps as u };
+//# sourceMappingURL=chart-sYFksFMk.d.cts.map

package/dist/chart-sYFksFMk.d.mts

@@ -0,0 +1,80 @@
+import { LegendPayload, ResponsiveContainer, Tooltip, TooltipContentProps } from "recharts";
+
+//#region packages/components/ui/chart.d.ts
+declare const THEMES: {
+  readonly light: "";
+  readonly dark: ".dark";
+};
+type ChartConfig = { [k in string]: {
+  label?: React.ReactNode;
+  icon?: React.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
+}) };
+type ChartContextProps = {
+  config: ChartConfig;
+};
+declare const useChart: () => ChartContextProps;
+type ChartContainerProps = React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof ResponsiveContainer>['children'];
+};
+declare const ChartContainer: ({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: ChartContainerProps) => import("react").JSX.Element;
+declare const ChartStyle: ({
+  id,
+  config
+}: {
+  id: string;
+  config: ChartConfig;
+}) => import("react").JSX.Element | null;
+declare const ChartTooltip: typeof Tooltip;
+type ChartTooltipContentProps = React.ComponentProps<'div'> & Partial<Pick<TooltipContentProps<number | string, string>, 'active' | 'payload' | 'label' | 'labelFormatter' | 'formatter'>> & {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: 'line' | 'dot' | 'dashed';
+  nameKey?: string;
+  labelKey?: string;
+  labelClassName?: string;
+};
+declare const ChartTooltipContent: ({
+  active,
+  payload,
+  className,
+  indicator,
+  hideLabel,
+  hideIndicator,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}: ChartTooltipContentProps) => import("react").JSX.Element | null;
+declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
+type ChartLegendContentProps = React.ComponentProps<'div'> & {
+  payload?: readonly LegendPayload[];
+  verticalAlign?: 'top' | 'bottom' | 'middle';
+  hideIcon?: boolean;
+  nameKey?: string;
+};
+declare const ChartLegendContent: ({
+  className,
+  hideIcon,
+  payload,
+  verticalAlign,
+  nameKey
+}: ChartLegendContentProps) => import("react").JSX.Element | null;
+//#endregion
+export { ChartLegendContent as a, ChartTooltip as c, useChart as d, ChartLegend as i, ChartTooltipContent as l, ChartContainer as n, ChartLegendContentProps as o, ChartContainerProps as r, ChartStyle as s, ChartConfig as t, ChartTooltipContentProps as u };
+//# sourceMappingURL=chart-sYFksFMk.d.mts.map

package/dist/checkbox-XfLNnG0S.d.cts

@@ -0,0 +1,24 @@
+import { Checkbox } from "radix-ui";
+
+//#region packages/components/ui/checkbox.d.ts
+/**
+ * Accessible checkbox input built on Radix UI's Checkbox primitive with checked, indeterminate, focus, invalid, and read-only states.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@customafk/lunas-ui/ui/checkbox';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <div className="flex items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <Label htmlFor="terms">Accept terms and conditions</Label>
+ * </div>
+ * ```
+ */
+declare function Checkbox$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Checkbox.Root>): import("react").JSX.Element;
+//#endregion
+export { Checkbox$1 as t };
+//# sourceMappingURL=checkbox-XfLNnG0S.d.cts.map

package/dist/checkbox-XfLNnG0S.d.mts

@@ -0,0 +1,24 @@
+import { Checkbox } from "radix-ui";
+
+//#region packages/components/ui/checkbox.d.ts
+/**
+ * Accessible checkbox input built on Radix UI's Checkbox primitive with checked, indeterminate, focus, invalid, and read-only states.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@customafk/lunas-ui/ui/checkbox';
+ * import { Label } from '@customafk/lunas-ui/ui/label';
+ *
+ * <div className="flex items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <Label htmlFor="terms">Accept terms and conditions</Label>
+ * </div>
+ * ```
+ */
+declare function Checkbox$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Checkbox.Root>): import("react").JSX.Element;
+//#endregion
+export { Checkbox$1 as t };
+//# sourceMappingURL=checkbox-XfLNnG0S.d.mts.map

package/dist/{checkbox-field-DdeohRmi.cjs → checkbox-field-B1vCz-Wf.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/checkbox.cjs"),t=require("./tanstack-form-DS_ZvRl8.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,description:o,options:s,tooltip:c,helperText:l,orientation:u})=>{let d=t.G(),f=(0,i.useStore)(d.form.store,({isSubmitting:e})=>e);return(0,r.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,r.jsxs)(n.Field,{orientation:u,children:[(0,r.jsxs)(n.FieldContent,{children:[(0,r.jsxs)(n.FieldLabel,{children:[a,c&&(0,r.jsx)(n.FieldTooltip,{tooltip:c})]}),(0,r.jsx)(n.FieldDescription,{children:o}),(0,r.jsx)(n.FieldNote,{isShow:!!l,children:l})]}),(0,r.jsx)(n.FieldContentMain,{children:(0,r.jsx)(n.FieldGroup,{className:`flex flex-col gap-y-2`,children:s.map(t=>(0,r.jsxs)(n.Field,{orientation:`horizontal`,children:[(0,r.jsx)(e.Checkbox,{id:`${d.name}-${t.value}`,name:d.name,checked:d.state.value?.includes(t.value)??!1,disabled:f,onCheckedChange:e=>{if(e&&d.state.value!==null)d.pushValue(t.value);else if(e&&d.state.value===null)d.setValue([t.value]);else if(!e&&d.state.value!==null){let e=d.state.value.indexOf(t.value);e>-1&&d.removeValue(e)}else d.setValue(null)}}),(0,r.jsx)(n.FieldLabel,{htmlFor:`${d.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),(0,r.jsx)(n.FieldSeparator,{})]})};exports.CheckboxField=a;
-//# sourceMappingURL=checkbox-field-DdeohRmi.cjs.map
+const e=require("./ui/checkbox.cjs"),t=require("./tanstack-form-CNrZQZhn.cjs"),n=require("./field-BV5twmKA.cjs");let r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,description:o,options:s,tooltip:c,helperText:l,orientation:u})=>{let d=t.G(),f=(0,i.useStore)(d.form.store,({isSubmitting:e})=>e);return(0,r.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,r.jsxs)(n.Field,{orientation:u,children:[(0,r.jsxs)(n.FieldContent,{children:[(0,r.jsxs)(n.FieldLabel,{children:[a,c&&(0,r.jsx)(n.FieldTooltip,{tooltip:c})]}),(0,r.jsx)(n.FieldDescription,{children:o}),(0,r.jsx)(n.FieldNote,{isShow:!!l,children:l})]}),(0,r.jsx)(n.FieldContentMain,{children:(0,r.jsx)(n.FieldGroup,{className:`flex flex-col gap-y-2`,children:s.map(t=>(0,r.jsxs)(n.Field,{orientation:`horizontal`,children:[(0,r.jsx)(e.Checkbox,{id:`${d.name}-${t.value}`,name:d.name,checked:d.state.value?.includes(t.value)??!1,disabled:f,onCheckedChange:e=>{if(e&&d.state.value!==null)d.pushValue(t.value);else if(e&&d.state.value===null)d.setValue([t.value]);else if(!e&&d.state.value!==null){let e=d.state.value.indexOf(t.value);e>-1&&d.removeValue(e)}else d.setValue(null)}}),(0,r.jsx)(n.FieldLabel,{htmlFor:`${d.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),(0,r.jsx)(n.FieldSeparator,{})]})};exports.CheckboxField=a;
+//# sourceMappingURL=checkbox-field-B1vCz-Wf.cjs.map

package/dist/{checkbox-field-DdeohRmi.cjs.map → checkbox-field-B1vCz-Wf.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-DdeohRmi.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","Checkbox","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"sLA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQA,EAAAA,EAAyC,EACjD,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,uBAApB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACP,EAAAA,WAAD,CAAY,UAAU,iCACnB,EAAQ,IAAI,IAET,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAA0B,YAAY,sBAAtC,EACE,EAAA,EAAA,IAAA,CAACO,EAAAA,SAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,8BAC7D,EAAO,KACE,CAAA,CACP,GAtBK,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"checkbox-field-B1vCz-Wf.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","Checkbox","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/checkbox-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldContentMain, FieldDescription, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nimport type { CheckboxFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected checkbox group field that manages an array of selected string values,\n * supporting multi-selection and submission-state disabling.\n *\n * @example\n * import { CheckboxField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"roles\">\n *   {() => (\n *     <CheckboxField\n *       label=\"Roles\"\n *       options={[\n *         { value: 'admin', label: 'Admin' },\n *         { value: 'editor', label: 'Editor' },\n *       ]}\n *       helperText=\"Select one or more roles\"\n *     />\n *   )}\n * </form.Field>\n */\nexport const CheckboxField: React.FC<Props> = ({ label, description, options, tooltip, helperText, orientation }) => {\n  const field = useTanStackFieldContext<string[] | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n        <FieldContentMain>\n          <FieldGroup className=\"flex flex-col gap-y-2\">\n            {options.map(option => {\n              return (\n                <Field key={option.value} orientation=\"horizontal\">\n                  <Checkbox\n                    id={`${field.name}-${option.value}`}\n                    name={field.name}\n                    checked={field.state.value?.includes(option.value) ?? false}\n                    disabled={isSubmitting}\n                    onCheckedChange={checked => {\n                      if (checked && field.state.value !== null) {\n                        field.pushValue(option.value);\n                      } else if (checked && field.state.value === null) {\n                        field.setValue([option.value]);\n                      } else if (!checked && field.state.value !== null) {\n                        const index = field.state.value.indexOf(option.value);\n                        if (index > -1) field.removeValue(index);\n                      } else {\n                        field.setValue(null);\n                      }\n                    }}\n                  />\n                  <FieldLabel htmlFor={`${field.name}-${option.value}`} className=\"text-text-positive\">\n                    {option.label}\n                  </FieldLabel>\n                </Field>\n              );\n            })}\n          </FieldGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"sLA8BA,MAAa,GAAkC,CAAE,QAAO,cAAa,UAAS,UAAS,aAAY,iBAAkB,CACnH,IAAM,EAAQA,EAAAA,EAAyC,EACjD,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,uBAApB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACP,EAAAA,WAAD,CAAY,UAAU,iCACnB,EAAQ,IAAI,IAET,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAA0B,YAAY,sBAAtC,EACE,EAAA,EAAA,IAAA,CAACO,EAAAA,SAAD,CACE,GAAI,GAAG,EAAM,KAAK,GAAG,EAAO,QAC5B,KAAM,EAAM,KACZ,QAAS,EAAM,MAAM,OAAO,SAAS,EAAO,KAAK,GAAK,GACtD,SAAU,EACV,gBAAiB,GAAW,CAC1B,GAAI,GAAW,EAAM,MAAM,QAAU,KACnC,EAAM,UAAU,EAAO,KAAK,OACvB,GAAI,GAAW,EAAM,MAAM,QAAU,KAC1C,EAAM,SAAS,CAAC,EAAO,KAAK,CAAC,OACxB,GAAI,CAAC,GAAW,EAAM,MAAM,QAAU,KAAM,CACjD,IAAM,EAAQ,EAAM,MAAM,MAAM,QAAQ,EAAO,KAAK,EAChD,EAAQ,IAAI,EAAM,YAAY,CAAK,CACzC,MACE,EAAM,SAAS,IAAI,CAEvB,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAAY,QAAS,GAAG,EAAM,KAAK,GAAG,EAAO,QAAS,UAAU,8BAC7D,EAAO,KACE,CAAA,CACP,GAtBK,EAAO,KAsBZ,CAEV,CACS,CAAA,CACI,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{checkbox-field-CRcfuDu1.mjs → checkbox-field-FqCe38_D.mjs}

@@ -1,2 +1,2 @@
-import{Checkbox as e}from"./ui/checkbox.mjs";import{G as t}from"./tanstack-form-CM_Hb3JT.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-BKyUqvzh.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useStore as p}from"@tanstack/react-form";const m=({label:m,description:h,options:g,tooltip:_,helperText:v,orientation:y})=>{let b=t(),x=p(b.form.store,({isSubmitting:e})=>e);return f(o,{className:`gap-y-4 px-4`,children:[f(n,{orientation:y,children:[f(r,{children:[f(s,{children:[m,_&&d(u,{tooltip:_})]}),d(a,{children:h}),d(c,{isShow:!!v,children:v})]}),d(i,{children:d(o,{className:`flex flex-col gap-y-2`,children:g.map(t=>f(n,{orientation:`horizontal`,children:[d(e,{id:`${b.name}-${t.value}`,name:b.name,checked:b.state.value?.includes(t.value)??!1,disabled:x,onCheckedChange:e=>{if(e&&b.state.value!==null)b.pushValue(t.value);else if(e&&b.state.value===null)b.setValue([t.value]);else if(!e&&b.state.value!==null){let e=b.state.value.indexOf(t.value);e>-1&&b.removeValue(e)}else b.setValue(null)}}),d(s,{htmlFor:`${b.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),d(l,{})]})};export{m as CheckboxField};
-//# sourceMappingURL=checkbox-field-CRcfuDu1.mjs.map
+import{Checkbox as e}from"./ui/checkbox.mjs";import{G as t}from"./tanstack-form-PC9YNeeo.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-BKyUqvzh.mjs";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useStore as p}from"@tanstack/react-form";const m=({label:m,description:h,options:g,tooltip:_,helperText:v,orientation:y})=>{let b=t(),x=p(b.form.store,({isSubmitting:e})=>e);return f(o,{className:`gap-y-4 px-4`,children:[f(n,{orientation:y,children:[f(r,{children:[f(s,{children:[m,_&&d(u,{tooltip:_})]}),d(a,{children:h}),d(c,{isShow:!!v,children:v})]}),d(i,{children:d(o,{className:`flex flex-col gap-y-2`,children:g.map(t=>f(n,{orientation:`horizontal`,children:[d(e,{id:`${b.name}-${t.value}`,name:b.name,checked:b.state.value?.includes(t.value)??!1,disabled:x,onCheckedChange:e=>{if(e&&b.state.value!==null)b.pushValue(t.value);else if(e&&b.state.value===null)b.setValue([t.value]);else if(!e&&b.state.value!==null){let e=b.state.value.indexOf(t.value);e>-1&&b.removeValue(e)}else b.setValue(null)}}),d(s,{htmlFor:`${b.name}-${t.value}`,className:`text-text-positive`,children:t.label})]},t.value))})})]}),d(l,{})]})};export{m as CheckboxField};
+//# sourceMappingURL=checkbox-field-FqCe38_D.mjs.map