@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/grid-i7Oz2Izf.d.cts

@@ -0,0 +1,19 @@
+//#region packages/components/layouts/grid.d.ts
+/**
+ * A responsive, container-query-driven grid that automatically adjusts column count based on available width.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@customafk/lunas-ui/layouts/grid';
+ *
+ * <Grid>
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ * ```
+ */
+declare const Grid: React.FC<React.PropsWithChildren>;
+//#endregion
+export { Grid as t };
+//# sourceMappingURL=grid-i7Oz2Izf.d.cts.map

package/dist/grid-i7Oz2Izf.d.mts

@@ -0,0 +1,19 @@
+//#region packages/components/layouts/grid.d.ts
+/**
+ * A responsive, container-query-driven grid that automatically adjusts column count based on available width.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@customafk/lunas-ui/layouts/grid';
+ *
+ * <Grid>
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ * ```
+ */
+declare const Grid: React.FC<React.PropsWithChildren>;
+//#endregion
+export { Grid as t };
+//# sourceMappingURL=grid-i7Oz2Izf.d.mts.map

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

@@ -0,0 +1,30 @@
+//#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 as t };
+//# sourceMappingURL=grid-product-card-bpADqDOQ.d.cts.map

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

@@ -0,0 +1,30 @@
+//#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 as t };
+//# sourceMappingURL=grid-product-card-bpADqDOQ.d.mts.map

package/dist/group-field-0kStiX8n.cjs

@@ -0,0 +1,2 @@
+const e=require("./field-BV5twmKA.cjs");let t=require("react/jsx-runtime");const n=({label:n,description:r,helperText:i,orientation:a=`responsive`,children:o})=>(0,t.jsxs)(e.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,t.jsxs)(e.Field,{orientation:a,children:[(0,t.jsxs)(e.FieldContent,{children:[(0,t.jsx)(e.FieldLabel,{children:n}),(0,t.jsx)(e.FieldDescription,{children:r})]}),(0,t.jsxs)(e.FieldContentMain,{children:[o,(0,t.jsx)(e.FieldNote,{isShow:!!i,children:i})]})]}),(0,t.jsx)(e.FieldSeparator,{})]});exports.TanStackFieldGroup=n;
+//# sourceMappingURL=group-field-0kStiX8n.cjs.map

package/dist/group-field-0kStiX8n.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-field-0kStiX8n.cjs","names":["FieldGroup","Field","FieldContent","FieldLabel","FieldDescription","FieldContentMain","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,eAGE,EAAA,EAAA,KAAA,CAACA,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,IAAA,CAACC,EAAAA,WAAD,CAAA,SAAa,CAAkB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,CACG,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}

package/dist/group-field-bviEXmo4.mjs

@@ -0,0 +1,2 @@
+import{Field as e,FieldContent as t,FieldContentMain as n,FieldDescription as r,FieldGroup as i,FieldLabel as a,FieldNote as o,FieldSeparator as s}from"./field-BKyUqvzh.mjs";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=({label:u,description:d,helperText:f,orientation:p=`responsive`,children:m})=>l(i,{className:`gap-y-4 px-4`,children:[l(e,{orientation:p,children:[l(t,{children:[c(a,{children:u}),c(r,{children:d})]}),l(n,{children:[m,c(o,{isShow:!!f,children:f})]})]}),c(s,{})]});export{u as TanStackFieldGroup};
+//# sourceMappingURL=group-field-bviEXmo4.mjs.map

package/dist/group-field-bviEXmo4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-field-bviEXmo4.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"gOA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,cAGE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAoB,uBAApB,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,CAAkB,CAAA,EAC/B,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACG,EACD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP"}

package/dist/hover-card-Prwm-0Q4.d.cts

@@ -0,0 +1,35 @@
+import { HoverCard } from "radix-ui";
+
+//#region packages/components/ui/hover-card.d.ts
+/**
+ * Root provider for the HoverCard — shows a floating card when the trigger is hovered.
+ *
+ * @example
+ * ```tsx
+ * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@customafk/lunas-ui/ui/hover-card';
+ *
+ * <HoverCard>
+ *   <HoverCardTrigger>@username</HoverCardTrigger>
+ *   <HoverCardContent>
+ *     <p>Profile details here</p>
+ *   </HoverCardContent>
+ * </HoverCard>
+ * ```
+ */
+declare function HoverCard$1({
+  ...props
+}: React.ComponentProps<typeof HoverCard.Root>): import("react").JSX.Element;
+/** The element that triggers the HoverCard on pointer enter. */
+declare function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCard.Trigger>): import("react").JSX.Element;
+/** The floating card panel displayed when the trigger is hovered. */
+declare function HoverCardContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof HoverCard.Content>): import("react").JSX.Element;
+//#endregion
+export { HoverCardContent as n, HoverCardTrigger as r, HoverCard$1 as t };
+//# sourceMappingURL=hover-card-Prwm-0Q4.d.cts.map

package/dist/hover-card-Prwm-0Q4.d.mts

@@ -0,0 +1,35 @@
+import { HoverCard } from "radix-ui";
+
+//#region packages/components/ui/hover-card.d.ts
+/**
+ * Root provider for the HoverCard — shows a floating card when the trigger is hovered.
+ *
+ * @example
+ * ```tsx
+ * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@customafk/lunas-ui/ui/hover-card';
+ *
+ * <HoverCard>
+ *   <HoverCardTrigger>@username</HoverCardTrigger>
+ *   <HoverCardContent>
+ *     <p>Profile details here</p>
+ *   </HoverCardContent>
+ * </HoverCard>
+ * ```
+ */
+declare function HoverCard$1({
+  ...props
+}: React.ComponentProps<typeof HoverCard.Root>): import("react").JSX.Element;
+/** The element that triggers the HoverCard on pointer enter. */
+declare function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCard.Trigger>): import("react").JSX.Element;
+/** The floating card panel displayed when the trigger is hovered. */
+declare function HoverCardContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React.ComponentProps<typeof HoverCard.Content>): import("react").JSX.Element;
+//#endregion
+export { HoverCardContent as n, HoverCardTrigger as r, HoverCard$1 as t };
+//# sourceMappingURL=hover-card-Prwm-0Q4.d.mts.map

package/dist/image-Cln0r7Eb.d.cts

@@ -0,0 +1,27 @@
+//#region packages/components/ui/image.d.ts
+/** Props for the Image component. */
+type Props = {
+  /** URL of the image to display. */src?: string; /** Accessible alt text for the image. */
+  alt?: string; /** Width of the image container (number treated as pixels). */
+  width?: number | string; /** Height of the image container (number treated as pixels). */
+  height?: number | string; /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */
+  maxRetries?: number; /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */
+  retryDelay?: number; /** Class name applied to the outer container div. */
+  className?: string; /** Class name applied to the `<img>` element. */
+  imageClassName?: string; /** Click handler for the image container. */
+  onClick?: () => void;
+};
+/**
+ * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.
+ *
+ * @example
+ * ```tsx
+ * import { Image } from '@customafk/lunas-ui/ui/image';
+ *
+ * <Image src="/hero.jpg" alt="Hero" width={400} height={300} maxRetries={3} />
+ * ```
+ */
+declare const Image: React.FC<Props>;
+//#endregion
+export { Image as t };
+//# sourceMappingURL=image-Cln0r7Eb.d.cts.map

package/dist/image-Cln0r7Eb.d.mts

@@ -0,0 +1,27 @@
+//#region packages/components/ui/image.d.ts
+/** Props for the Image component. */
+type Props = {
+  /** URL of the image to display. */src?: string; /** Accessible alt text for the image. */
+  alt?: string; /** Width of the image container (number treated as pixels). */
+  width?: number | string; /** Height of the image container (number treated as pixels). */
+  height?: number | string; /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */
+  maxRetries?: number; /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */
+  retryDelay?: number; /** Class name applied to the outer container div. */
+  className?: string; /** Class name applied to the `<img>` element. */
+  imageClassName?: string; /** Click handler for the image container. */
+  onClick?: () => void;
+};
+/**
+ * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.
+ *
+ * @example
+ * ```tsx
+ * import { Image } from '@customafk/lunas-ui/ui/image';
+ *
+ * <Image src="/hero.jpg" alt="Hero" width={400} height={300} maxRetries={3} />
+ * ```
+ */
+declare const Image: React.FC<Props>;
+//#endregion
+export { Image as t };
+//# sourceMappingURL=image-Cln0r7Eb.d.mts.map