@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/flex-bw7U4hXn.d.mts

@@ -0,0 +1,114 @@
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/layouts/flex.d.ts
+declare const flexVariants: (props?: ({
+  vertical?: boolean | null | undefined;
+  width?: "max" | "min" | "full" | "auto" | "fit" | "screen" | "null" | null | undefined;
+  wrap?: boolean | null | undefined;
+  margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Props = {
+  /** Additional Tailwind classes merged on top of the variant-generated classes. */className?: string;
+  /**
+   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * Controls the width of the flex container.
+   * - `'full'` — `w-full`
+   * - `'auto'` — `w-auto`
+   * - `'fit'`  — `w-fit` (default)
+   * - `'screen'` — `w-screen`
+   * - `'min'` — `w-min`
+   * - `'max'` — `w-max`
+   * - `'null'` — no width utility applied
+   * @default 'fit'
+   */
+  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';
+  /**
+   * Allows children to wrap onto multiple lines when `true`.
+   * @default true
+   */
+  wrap?: boolean;
+  /**
+   * Uniform margin applied to the container.
+   * - `'none'` — `m-0` (default)
+   * - `'sm'` — `m-2`
+   * - `'md'` — `m-4`
+   * - `'lg'` — `m-6`
+   * - `'xl'` — `m-8`
+   * @default 'none'
+   */
+  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Uniform padding applied to the container.
+   * - `'none'` — `p-0`
+   * - `'sm'`  — `p-2` (default)
+   * - `'md'`  — `p-4`
+   * - `'lg'`  — `p-6`
+   * - `'xl'`  — `p-8`
+   * @default 'sm'
+   */
+  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Gap between child elements.
+   * - `'none'` — `gap-0`
+   * - `'xs'`  — `gap-1` (default)
+   * - `'sm'`  — `gap-2`
+   * - `'md'`  — `gap-4`
+   * - `'lg'`  — `gap-6`
+   * - `'xl'`  — `gap-8`
+   * @default 'xs'
+   */
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Justification of children along the main axis (`justify-content`).
+   * @default 'start'
+   */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+  /**
+   * Alignment of children along the cross axis (`align-items`).
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+} & VariantProps<typeof flexVariants>;
+/**
+ * A flexible, variant-driven flex container built on CVA and TailwindCSS.
+ *
+ * @example
+ * ```tsx
+ * import { Flex } from '@customafk/lunas-ui/layouts/flex';
+ *
+ * // Horizontal row with centered children and a medium gap
+ * <Flex gap="md" justify="between" align="center">
+ *   <span>Left</span>
+ *   <span>Right</span>
+ * </Flex>
+ *
+ * // Vertical stack that fills parent width
+ * <Flex vertical width="full" gap="sm" padding="md">
+ *   <p>First item</p>
+ *   <p>Second item</p>
+ * </Flex>
+ * ```
+ */
+declare const Flex: import("react").MemoExoticComponent<({
+  vertical,
+  wrap,
+  width,
+  margin,
+  padding,
+  gap,
+  justify,
+  align,
+  className,
+  children
+}: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
+//#endregion
+export { Flex as t };
+//# sourceMappingURL=flex-bw7U4hXn.d.mts.map

package/dist/form-CMP15S4r.d.cts

@@ -0,0 +1,109 @@
+import { Label, Slot } from "radix-ui";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/ui/form.d.ts
+/**
+ * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.
+ *
+ * @example
+ * ```tsx
+ * import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@customafk/lunas-ui/ui/form';
+ * import { useForm } from 'react-hook-form';
+ *
+ * const form = useForm<{ username: string }>();
+ *
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField
+ *       control={form.control}
+ *       name="username"
+ *       render={({ field }) => (
+ *         <FormItem>
+ *           <FormLabel>Username</FormLabel>
+ *           <FormControl><input {...field} /></FormControl>
+ *           <FormMessage />
+ *         </FormItem>
+ *       )}
+ *     />
+ *   </form>
+ * </Form>
+ * ```
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({
+  children,
+  watch,
+  getValues,
+  getFieldState,
+  setError,
+  clearErrors,
+  setValue,
+  setValues,
+  trigger,
+  formState,
+  resetField,
+  reset,
+  handleSubmit,
+  unregister,
+  control,
+  register,
+  setFocus,
+  subscribe
+}: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+/**
+ * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.
+ */
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
+/**
+ * Hook that returns the field state and IDs for the enclosing FormField.
+ * Must be called inside a component rendered within a `<FormField>`.
+ */
+declare const useFormField: () => {
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: import("react-hook-form").FieldError;
+  id: string;
+  control: import("react-hook-form").Control<FieldValues, any, FieldValues>;
+  resetField: import("react-hook-form").UseFormResetField<FieldValues>;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+};
+/**
+ * Container for a single form field — generates a unique ID and provides it via context to FormLabel, FormControl, and FormMessage.
+ *
+ * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).
+ */
+declare const FormItem: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "vertical" | "horizontal" | "responsive";
+}) => import("react").JSX.Element>;
+/** Styled label automatically associated with the FormItem's control via `htmlFor`. */
+declare const FormLabel: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
+/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
+declare const FormControl: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
+/** Helper text displayed below the control that provides additional context about the field. */
+declare function FormDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): import("react").JSX.Element;
+/** Displays the validation error message for the field, or falls back to `children` when there is no error. */
+declare function FormMessage({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'p'>): import("react").JSX.Element;
+//#endregion
+export { FormItem as a, useFormField as c, FormField as i, FormControl as n, FormLabel as o, FormDescription as r, FormMessage as s, Form as t };
+//# sourceMappingURL=form-CMP15S4r.d.cts.map

package/dist/form-CMP15S4r.d.mts

@@ -0,0 +1,109 @@
+import { Label, Slot } from "radix-ui";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/ui/form.d.ts
+/**
+ * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.
+ *
+ * @example
+ * ```tsx
+ * import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@customafk/lunas-ui/ui/form';
+ * import { useForm } from 'react-hook-form';
+ *
+ * const form = useForm<{ username: string }>();
+ *
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField
+ *       control={form.control}
+ *       name="username"
+ *       render={({ field }) => (
+ *         <FormItem>
+ *           <FormLabel>Username</FormLabel>
+ *           <FormControl><input {...field} /></FormControl>
+ *           <FormMessage />
+ *         </FormItem>
+ *       )}
+ *     />
+ *   </form>
+ * </Form>
+ * ```
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({
+  children,
+  watch,
+  getValues,
+  getFieldState,
+  setError,
+  clearErrors,
+  setValue,
+  setValues,
+  trigger,
+  formState,
+  resetField,
+  reset,
+  handleSubmit,
+  unregister,
+  control,
+  register,
+  setFocus,
+  subscribe
+}: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+/**
+ * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.
+ */
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => import("react").JSX.Element;
+/**
+ * Hook that returns the field state and IDs for the enclosing FormField.
+ * Must be called inside a component rendered within a `<FormField>`.
+ */
+declare const useFormField: () => {
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: import("react-hook-form").FieldError;
+  id: string;
+  control: import("react-hook-form").Control<FieldValues, any, FieldValues>;
+  resetField: import("react-hook-form").UseFormResetField<FieldValues>;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+};
+/**
+ * Container for a single form field — generates a unique ID and provides it via context to FormLabel, FormControl, and FormMessage.
+ *
+ * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).
+ */
+declare const FormItem: import("react").MemoExoticComponent<({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "vertical" | "horizontal" | "responsive";
+}) => import("react").JSX.Element>;
+/** Styled label automatically associated with the FormItem's control via `htmlFor`. */
+declare const FormLabel: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Label.Root>) => import("react").JSX.Element>;
+/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
+declare const FormControl: import("react").MemoExoticComponent<({
+  ...props
+}: React.ComponentProps<typeof Slot.Slot>) => import("react").JSX.Element>;
+/** Helper text displayed below the control that provides additional context about the field. */
+declare function FormDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): import("react").JSX.Element;
+/** Displays the validation error message for the field, or falls back to `children` when there is no error. */
+declare function FormMessage({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'p'>): import("react").JSX.Element;
+//#endregion
+export { FormItem as a, useFormField as c, FormField as i, FormControl as n, FormLabel as o, FormDescription as r, FormMessage as s, Form as t };
+//# sourceMappingURL=form-CMP15S4r.d.mts.map

package/dist/gain-loss-bar-chart-Dz1oAj8H.mjs

@@ -0,0 +1,2 @@
+import{formatSignedPercent as e,getDirectionColor as t}from"./features/charts/index.mjs";import{ChartContainer as n,ChartTooltip as r,ChartTooltipContent as i}from"./ui/chart.mjs";import{useMemo as a}from"react";import{cn as o}from"@customafk/react-toolkit/utils";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{Bar as l,BarChart as u,CartesianGrid as d,Rectangle as f,ReferenceLine as p,XAxis as m,YAxis as h}from"recharts";const g=({data:g,label:_=`Return`,upColor:v=`var(--success)`,downColor:y=`var(--danger)`,valueFormatter:b=t=>e(t),showGrid:x=!0,className:S,animate:C=!0,height:w})=>s(n,{"data-slot":`gain-loss-bar-chart`,config:a(()=>({value:{label:_,color:v}}),[_,v]),className:o(`w-full`,S),style:w===void 0?void 0:{height:w,aspectRatio:`auto`},children:c(u,{data:g,margin:{top:8,right:12,bottom:0,left:12},children:[x&&s(d,{vertical:!1}),s(m,{dataKey:`name`,tickLine:!1,axisLine:!1,tickMargin:8}),s(h,{tickLine:!1,axisLine:!1,tickMargin:8,width:56,tickFormatter:b}),s(p,{y:0,stroke:`var(--border)`}),s(r,{cursor:!1,content:s(i,{hideIndicator:!0,formatter:e=>b(Number(e))})}),s(l,{dataKey:`value`,isAnimationActive:C,shape:e=>s(f,{...e,fill:t(Number(e.payload?.value??0),0,{up:v,down:y})})})]})});export{g as GainLossBarChart};
+//# sourceMappingURL=gain-loss-bar-chart-Dz1oAj8H.mjs.map

package/dist/gain-loss-bar-chart-Dz1oAj8H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gain-loss-bar-chart-Dz1oAj8H.mjs","names":[],"sources":["../packages/components/features/charts/components/gain-loss-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, Rectangle, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatSignedPercent, getDirectionColor } from '../utils';\n\nexport type GainLossBarChartProps = BaseChartProps & {\n  /** `name` is the period label (e.g. a month or quarter); `value` is the signed return. */\n  data: NamedValue[];\n  /** Series label. Defaults to `'Return'`. */\n  label?: string;\n  upColor?: string;\n  downColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to a signed percentage. */\n  valueFormatter?: (value: number) => string;\n  showGrid?: boolean;\n};\n\n/**\n * Diverging bars for period returns — bars grow up (gain) or down (loss) from a zero baseline,\n * colored accordingly. Clearer than a plain bar chart for signed data.\n *\n * @example\n * ```tsx\n * import { GainLossBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <GainLossBarChart\n *   data={[\n *     { name: 'Jan', value: 0.032 },\n *     { name: 'Feb', value: -0.014 },\n *   ]}\n * />\n * ```\n */\nexport const GainLossBarChart = ({\n  data,\n  label = 'Return',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => formatSignedPercent(value),\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: GainLossBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color: upColor } }), [label, upColor]);\n\n  return (\n    <ChartContainer\n      data-slot=\"gain-loss-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n        <ReferenceLine y={0} stroke=\"var(--border)\" />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideIndicator formatter={value => valueFormatter(Number(value))} />} />\n        <Bar\n          dataKey=\"value\"\n          isAnimationActive={animate}\n          shape={props => <Rectangle {...props} fill={getDirectionColor(Number(props.payload?.value ?? 0), 0, { up: upColor, down: downColor })} />}\n        />\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"kbAwCA,MAAa,GAAoB,CAC/B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAAS,EAAoB,CAAK,EACnD,WAAW,GACX,YACA,UAAU,GACV,YAKE,EAAC,EAAD,CACE,YAAU,sBACV,OALW,OAA4B,CAAE,MAAO,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAKhF,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,EACxE,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,EAC7C,EAAC,EAAD,CAAc,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,cAAA,GAAc,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,EACjI,EAAC,EAAD,CACE,QAAQ,QACR,kBAAmB,EACnB,MAAO,GAAS,EAAC,EAAD,CAAW,GAAI,EAAO,KAAM,EAAkB,OAAO,EAAM,SAAS,OAAS,CAAC,EAAG,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,CAAI,CAAA,CACzI,CAAA,CACO,GACI,CAAA"}

package/dist/gain-loss-bar-chart-FUzN7DxF.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,label:s=`Return`,upColor:c=`var(--success)`,downColor:l=`var(--danger)`,valueFormatter:u=t=>e.formatSignedPercent(t),showGrid:d=!0,className:f,animate:p=!0,height:m})=>(0,i.jsx)(t.ChartContainer,{"data-slot":`gain-loss-bar-chart`,config:(0,n.useMemo)(()=>({value:{label:s,color:c}}),[s,c]),className:(0,r.cn)(`w-full`,f),style:m===void 0?void 0:{height:m,aspectRatio:`auto`},children:(0,i.jsxs)(a.BarChart,{data:o,margin:{top:8,right:12,bottom:0,left:12},children:[d&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`name`,tickLine:!1,axisLine:!1,tickMargin:8}),(0,i.jsx)(a.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:56,tickFormatter:u}),(0,i.jsx)(a.ReferenceLine,{y:0,stroke:`var(--border)`}),(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{hideIndicator:!0,formatter:e=>u(Number(e))})}),(0,i.jsx)(a.Bar,{dataKey:`value`,isAnimationActive:p,shape:t=>(0,i.jsx)(a.Rectangle,{...t,fill:e.getDirectionColor(Number(t.payload?.value??0),0,{up:c,down:l})})})]})});exports.GainLossBarChart=o;
+//# sourceMappingURL=gain-loss-bar-chart-FUzN7DxF.cjs.map

package/dist/gain-loss-bar-chart-FUzN7DxF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gain-loss-bar-chart-FUzN7DxF.cjs","names":["formatSignedPercent","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ReferenceLine","ChartTooltip","ChartTooltipContent","Bar","Rectangle","getDirectionColor"],"sources":["../packages/components/features/charts/components/gain-loss-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, Rectangle, ReferenceLine, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatSignedPercent, getDirectionColor } from '../utils';\n\nexport type GainLossBarChartProps = BaseChartProps & {\n  /** `name` is the period label (e.g. a month or quarter); `value` is the signed return. */\n  data: NamedValue[];\n  /** Series label. Defaults to `'Return'`. */\n  label?: string;\n  upColor?: string;\n  downColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to a signed percentage. */\n  valueFormatter?: (value: number) => string;\n  showGrid?: boolean;\n};\n\n/**\n * Diverging bars for period returns — bars grow up (gain) or down (loss) from a zero baseline,\n * colored accordingly. Clearer than a plain bar chart for signed data.\n *\n * @example\n * ```tsx\n * import { GainLossBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <GainLossBarChart\n *   data={[\n *     { name: 'Jan', value: 0.032 },\n *     { name: 'Feb', value: -0.014 },\n *   ]}\n * />\n * ```\n */\nexport const GainLossBarChart = ({\n  data,\n  label = 'Return',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => formatSignedPercent(value),\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: GainLossBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color: upColor } }), [label, upColor]);\n\n  return (\n    <ChartContainer\n      data-slot=\"gain-loss-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n        <ReferenceLine y={0} stroke=\"var(--border)\" />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideIndicator formatter={value => valueFormatter(Number(value))} />} />\n        <Bar\n          dataKey=\"value\"\n          isAnimationActive={animate}\n          shape={props => <Rectangle {...props} fill={getDirectionColor(Number(props.payload?.value ?? 0), 0, { up: upColor, down: downColor })} />}\n        />\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAwCA,MAAa,GAAoB,CAC/B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAASA,EAAAA,oBAAoB,CAAK,EACnD,WAAW,GACX,YACA,UAAU,GACV,aAKE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,sBACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,MAAO,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAKhF,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,GACxE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,EAAG,EAAG,OAAO,eAAiB,CAAA,GAC7C,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,cAAA,GAAc,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CAAI,CAAA,CAAI,CAAA,GACjI,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CACE,QAAQ,QACR,kBAAmB,EACnB,MAAO,IAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,GAAI,EAAO,KAAMC,EAAAA,kBAAkB,OAAO,EAAM,SAAS,OAAS,CAAC,EAAG,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,CAAI,CAAA,CACzI,CAAA,CACO,GACI,CAAA"}

package/dist/google-Bl-jBW8L.d.cts

@@ -0,0 +1,48 @@
+import { CredentialResponse } from "@react-oauth/google";
+
+//#region packages/components/systems/google.d.ts
+type GoogleProps = {
+  /** When `true`, the Google One Tap prompt is suppressed and no login dialog is shown. */isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
+};
+/**
+ * Headless component that activates Google One Tap login and forwards the credential response.
+ *
+ * Must be rendered inside a `GoogleOAuthProvider` (or use the default export {@link ReactOAuth}
+ * which wraps this component automatically).
+ *
+ * @example
+ * ```tsx
+ * import { Google } from '@customafk/lunas-ui/systems/google';
+ *
+ * // Inside a GoogleOAuthProvider tree
+ * <Google isDisabled={false} onGoogleLoginSuccess={(cred) => handleLogin(cred)} />
+ * ```
+ */
+declare const Google: React.FC<GoogleProps>;
+type ReactOAuthProps = {
+  /** Google OAuth 2.0 client ID from the Google Cloud Console. */clientId: string; /** When `true`, the Google One Tap prompt is suppressed. */
+  isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
+};
+/**
+ * Convenience wrapper that provides the `GoogleOAuthProvider` context and mounts the {@link Google}
+ * One Tap component in a single step.
+ *
+ * @example
+ * ```tsx
+ * import ReactOAuth from '@customafk/lunas-ui/systems/google';
+ *
+ * <ReactOAuth
+ *   clientId="YOUR_GOOGLE_CLIENT_ID"
+ *   isDisabled={false}
+ *   onGoogleLoginSuccess={(cred) => handleLogin(cred)}
+ * >
+ *   <App />
+ * </ReactOAuth>
+ * ```
+ */
+declare const ReactOAuth: React.FC<React.PropsWithChildren<ReactOAuthProps>>;
+//#endregion
+export { ReactOAuth as n, Google as t };
+//# sourceMappingURL=google-Bl-jBW8L.d.cts.map

package/dist/google-Bl-jBW8L.d.mts

@@ -0,0 +1,48 @@
+import { CredentialResponse } from "@react-oauth/google";
+
+//#region packages/components/systems/google.d.ts
+type GoogleProps = {
+  /** When `true`, the Google One Tap prompt is suppressed and no login dialog is shown. */isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
+};
+/**
+ * Headless component that activates Google One Tap login and forwards the credential response.
+ *
+ * Must be rendered inside a `GoogleOAuthProvider` (or use the default export {@link ReactOAuth}
+ * which wraps this component automatically).
+ *
+ * @example
+ * ```tsx
+ * import { Google } from '@customafk/lunas-ui/systems/google';
+ *
+ * // Inside a GoogleOAuthProvider tree
+ * <Google isDisabled={false} onGoogleLoginSuccess={(cred) => handleLogin(cred)} />
+ * ```
+ */
+declare const Google: React.FC<GoogleProps>;
+type ReactOAuthProps = {
+  /** Google OAuth 2.0 client ID from the Google Cloud Console. */clientId: string; /** When `true`, the Google One Tap prompt is suppressed. */
+  isDisabled: boolean; /** Callback invoked with the verified `CredentialResponse` after a successful Google sign-in. */
+  onGoogleLoginSuccess?: (params: CredentialResponse) => void | Promise<void>;
+};
+/**
+ * Convenience wrapper that provides the `GoogleOAuthProvider` context and mounts the {@link Google}
+ * One Tap component in a single step.
+ *
+ * @example
+ * ```tsx
+ * import ReactOAuth from '@customafk/lunas-ui/systems/google';
+ *
+ * <ReactOAuth
+ *   clientId="YOUR_GOOGLE_CLIENT_ID"
+ *   isDisabled={false}
+ *   onGoogleLoginSuccess={(cred) => handleLogin(cred)}
+ * >
+ *   <App />
+ * </ReactOAuth>
+ * ```
+ */
+declare const ReactOAuth: React.FC<React.PropsWithChildren<ReactOAuthProps>>;
+//#endregion
+export { ReactOAuth as n, Google as t };
+//# sourceMappingURL=google-Bl-jBW8L.d.mts.map

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/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