@akira-io/ui 1.3.1 → 2.1.0

package/dist/{chunk-3Z2VGVPI.js → chunk-53V4J7MC.js}

@@ -1,7 +1,11 @@
-import { cn, fieldSurface, fieldFocus } from './chunk-KHOA4TEI.js';
-import { jsx } from 'react/jsx-runtime';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import {
+  cn,
+  fieldFocus,
+  fieldSurface
+} from "./chunk-PPWJK5T3.js";
 
+// src/components/ui/input.tsx
+import { jsx } from "react/jsx-runtime";
 function Input({
   className,
   type,
@@ -21,6 +25,10 @@ function Input({
     }
   );
 }
+
+// src/components/ui/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Separator({
   className,
   orientation = "horizontal",
@@ -28,7 +36,7 @@ function Separator({
   slotName = "separator-root",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     SeparatorPrimitive.Root,
     {
       decorative,
@@ -43,6 +51,8 @@ function Separator({
   );
 }
 
-export { Input, Separator };
-//# sourceMappingURL=chunk-3Z2VGVPI.js.map
-//# sourceMappingURL=chunk-3Z2VGVPI.js.map
+export {
+  Input,
+  Separator
+};
+//# sourceMappingURL=chunk-53V4J7MC.js.map

package/dist/chunk-53V4J7MC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/input.tsx","../src/components/ui/separator.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { fieldFocus, fieldSurface } from '@/lib/language';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nfunction Input({\n    className,\n    type,\n    slotName = 'input',\n    ...props\n}: React.ComponentProps<'input'> & SlotNameProps) {\n    return (\n        <input\n            type={type}\n            className={cn(\n                `h-11 min-w-0 px-4 font-medium flex w-full transition-all placeholder:text-muted-foreground focus:bg-muted disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 ${fieldSurface} ${fieldFocus}`,\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport { Input };\n","import * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nfunction Separator({\n    className,\n    orientation = 'horizontal',\n    decorative = true,\n    slotName = 'separator-root',\n    ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root> & SlotNameProps) {\n    return (\n        <SeparatorPrimitive.Root\n            decorative={decorative}\n            orientation={orientation}\n            className={cn(\n                'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport { Separator };\n"],"mappings":";;;;;;;AAaQ;AAPR,SAAS,MAAM;AAAA,EACX;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACP,GAAkD;AAC9C,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP,+NAA+N,YAAY,IAAI,UAAU;AAAA,QACzP;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MACJ,aAAW;AAAA;AAAA,EACf;AAER;;;ACvBA,YAAY,wBAAwB;AAc5B,gBAAAA,YAAA;AARR,SAAS,UAAU;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,WAAW;AAAA,EACX,GAAG;AACP,GAAyE;AACrE,SACI,gBAAAA;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MACJ,aAAW;AAAA;AAAA,EACf;AAER;","names":["jsx"]}

package/dist/chunk-BH3B26DK.js

@@ -0,0 +1,394 @@
+import {
+  useUiLabels
+} from "./chunk-OS7YY5R4.js";
+import {
+  Label
+} from "./chunk-BP2YDMMI.js";
+import {
+  Input
+} from "./chunk-53V4J7MC.js";
+import {
+  Button,
+  cn,
+  elevatedSurface,
+  focusRing
+} from "./chunk-PPWJK5T3.js";
+
+// src/components/ui/alert.tsx
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var alertVariants = cva(
+  `${elevatedSurface} relative w-full px-5 py-4 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "border-destructive/30 bg-destructive/10 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/80",
+        warning: "ring-warning/20 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/80",
+        info: "ring-info/20 bg-info/10 text-info *:data-[slot=alert-description]:text-info/80"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var alertDefaultLabels = {
+  warningLabel: "Warning",
+  infoLabel: "Information"
+};
+var SEVERITY_LABELS = {
+  warning: "warningLabel",
+  info: "infoLabel"
+};
+function Alert({
+  className,
+  variant,
+  labels,
+  slotName = "alert",
+  ...props
+}) {
+  const resolved = useUiLabels("alert", alertDefaultLabels, labels);
+  const severity = variant ? SEVERITY_LABELS[variant] : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "aria-label": severity ? resolved[severity] : void 0,
+      className: cn(alertVariants({ variant }), className),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function AlertTitle({
+  className,
+  slotName = "alert-title",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "min-h-4 font-medium tracking-tight col-start-2 line-clamp-1",
+        className
+      ),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function AlertDescription({
+  className,
+  slotName = "alert-description",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "gap-1 text-sm [&_p]:leading-relaxed col-start-2 grid justify-items-start text-muted-foreground",
+        className
+      ),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+
+// src/components/ui/checkbox.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Checkbox({
+  className,
+  slotName = "checkbox",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    CheckboxPrimitive.Root,
+    {
+      className: cn(
+        `peer size-5 shadow-xs shrink-0 rounded-md border border-border transition-all disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground ${focusRing}`,
+        className
+      ),
+      ...props,
+      "data-slot": slotName,
+      children: /* @__PURE__ */ jsx2(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current transition-none",
+          children: /* @__PURE__ */ jsx2(CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/field-context.ts
+import * as React from "react";
+var FieldContext = React.createContext(null);
+function useOptionalField() {
+  return React.useContext(FieldContext);
+}
+function useField() {
+  const field = useOptionalField();
+  if (!field) {
+    throw new Error("Field parts must be rendered inside a Field.");
+  }
+  return field;
+}
+
+// src/components/ui/field-error.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FieldError({
+  message,
+  className,
+  slotName = "field-error",
+  ...props
+}) {
+  const field = useOptionalField();
+  if (!message) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    "p",
+    {
+      id: field?.errorId,
+      className: cn(
+        "ml-1 text-xs font-medium text-destructive group-data-[orientation=horizontal]/field:col-span-2 group-data-[orientation=horizontal]/field:row-start-3",
+        className
+      ),
+      ...props,
+      "data-slot": slotName,
+      children: message
+    }
+  );
+}
+
+// src/components/ui/field.tsx
+import { Slot } from "@radix-ui/react-slot";
+import * as React2 from "react";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+function Field({
+  className,
+  children,
+  id,
+  orientation = "vertical",
+  error,
+  invalid,
+  required = false,
+  slotName = "field",
+  ...props
+}) {
+  const generatedId = React2.useId();
+  const fieldId = id ?? generatedId;
+  const [hasDescription, setHasDescription] = React2.useState(false);
+  const isInvalid = invalid ?? Boolean(error);
+  const field = React2.useMemo(
+    () => ({
+      controlId: fieldId,
+      descriptionId: `${fieldId}-description`,
+      errorId: `${fieldId}-error`,
+      orientation,
+      invalid: isInvalid,
+      required,
+      hasDescription,
+      setHasDescription
+    }),
+    [fieldId, orientation, isInvalid, required, hasDescription]
+  );
+  return /* @__PURE__ */ jsx4(FieldContext.Provider, { value: field, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-orientation": orientation,
+      "data-invalid": isInvalid ? "true" : void 0,
+      className: cn(
+        "group/field",
+        orientation === "horizontal" ? "gap-x-4 gap-y-1 grid grid-cols-[1fr_auto] items-center" : "gap-2 flex flex-col",
+        className
+      ),
+      ...props,
+      "data-slot": slotName,
+      children: [
+        children,
+        /* @__PURE__ */ jsx4(FieldError, { message: error })
+      ]
+    }
+  ) });
+}
+function FieldGroup({
+  className,
+  slotName = "field-group",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn("gap-6 flex w-full flex-col", className),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function FieldLabel({
+  className,
+  children,
+  requiredLabel = "Required",
+  slotName = "field-label",
+  ...props
+}) {
+  const { controlId, invalid, required } = useField();
+  return /* @__PURE__ */ jsxs(
+    Label,
+    {
+      htmlFor: controlId,
+      className: cn(
+        "gap-1 flex items-center group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-1",
+        invalid && "text-destructive",
+        className
+      ),
+      ...props,
+      slotName,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              "data-slot": "field-required",
+              "aria-hidden": "true",
+              className: "text-destructive",
+              children: "*"
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { className: "sr-only", children: requiredLabel })
+        ] }) : null
+      ]
+    }
+  );
+}
+function FieldDescription({
+  className,
+  slotName = "field-description",
+  ...props
+}) {
+  const { descriptionId, setHasDescription } = useField();
+  React2.useEffect(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
+  return /* @__PURE__ */ jsx4(
+    "p",
+    {
+      id: descriptionId,
+      className: cn(
+        "ml-1 text-xs font-medium text-muted-foreground group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-2",
+        className
+      ),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+function FieldControl({
+  className,
+  ...props
+}) {
+  const {
+    controlId,
+    descriptionId,
+    errorId,
+    invalid,
+    required,
+    hasDescription
+  } = useField();
+  const requiredProps = required ? { required: true } : {};
+  const describedBy = [
+    hasDescription ? descriptionId : null,
+    invalid ? errorId : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx4(
+    Slot,
+    {
+      "data-field-control": "true",
+      id: controlId,
+      "aria-describedby": describedBy || void 0,
+      "aria-invalid": invalid ? true : void 0,
+      ...requiredProps,
+      className: cn(
+        "group-data-[orientation=horizontal]/field:col-start-2 group-data-[orientation=horizontal]/field:row-span-2 group-data-[orientation=horizontal]/field:row-start-1 group-data-[orientation=horizontal]/field:justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/password-input.tsx
+import { Eye, EyeOff } from "lucide-react";
+import * as React3 from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var passwordInputDefaultLabels = {
+  showLabel: "Show password",
+  hideLabel: "Hide password"
+};
+function PasswordInput({
+  className,
+  revealable = true,
+  showLabel,
+  hideLabel,
+  slotName = "password-input",
+  ...props
+}) {
+  const labels = useUiLabels("passwordInput", passwordInputDefaultLabels, {
+    showLabel,
+    hideLabel
+  });
+  const [visible, setVisible] = React3.useState(false);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative w-full", "data-slot": slotName, children: [
+    /* @__PURE__ */ jsx5(
+      Input,
+      {
+        type: visible ? "text" : "password",
+        className: cn(revealable && "pr-12", className),
+        ...props
+      }
+    ),
+    revealable ? /* @__PURE__ */ jsx5(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        slotName: "password-input-toggle",
+        "aria-label": visible ? labels.hideLabel : labels.showLabel,
+        "aria-pressed": visible,
+        disabled: props.disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => setVisible((current) => !current),
+        className: "right-1 absolute top-1/2 -translate-y-1/2",
+        children: visible ? /* @__PURE__ */ jsx5(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx5(Eye, { "aria-hidden": "true" })
+      }
+    ) : null
+  ] });
+}
+
+export {
+  alertDefaultLabels,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Checkbox,
+  useField,
+  FieldError,
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldDescription,
+  FieldControl,
+  passwordInputDefaultLabels,
+  PasswordInput
+};
+//# sourceMappingURL=chunk-BH3B26DK.js.map

package/dist/chunk-BH3B26DK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/alert.tsx","../src/components/ui/checkbox.tsx","../src/components/ui/field-context.ts","../src/components/ui/field-error.tsx","../src/components/ui/field.tsx","../src/components/ui/password-input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { elevatedSurface } from '@/lib/language';\nimport { cn } from '@/lib/utils';\nimport { useUiLabels } from '@/locales/context';\nimport type { SlotNameProps } from '@/types';\n\nconst alertVariants = cva(\n    `${elevatedSurface} relative w-full px-5 py-4 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,\n    {\n        variants: {\n            variant: {\n                default: 'bg-card text-card-foreground',\n                destructive:\n                    'border-destructive/30 bg-destructive/10 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/80',\n                warning:\n                    'ring-warning/20 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/80',\n                info: 'ring-info/20 bg-info/10 text-info *:data-[slot=alert-description]:text-info/80',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    },\n);\n\nexport interface AlertLabels {\n    warningLabel: string;\n    infoLabel: string;\n}\n\nexport const alertDefaultLabels: AlertLabels = {\n    warningLabel: 'Warning',\n    infoLabel: 'Information',\n};\n\ntype AlertVariant = VariantProps<typeof alertVariants>['variant'];\n\nconst SEVERITY_LABELS: Partial<\n    Record<NonNullable<AlertVariant>, keyof AlertLabels>\n> = {\n    warning: 'warningLabel',\n    info: 'infoLabel',\n};\n\nfunction Alert({\n    className,\n    variant,\n    labels,\n    slotName = 'alert',\n    ...props\n}: React.ComponentProps<'div'> &\n    VariantProps<typeof alertVariants> &\n    SlotNameProps & { labels?: Partial<AlertLabels> }) {\n    const resolved = useUiLabels('alert', alertDefaultLabels, labels);\n    const severity = variant ? SEVERITY_LABELS[variant] : undefined;\n\n    return (\n        <div\n            role=\"alert\"\n            aria-label={severity ? resolved[severity] : undefined}\n            className={cn(alertVariants({ variant }), className)}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nfunction AlertTitle({\n    className,\n    slotName = 'alert-title',\n    ...props\n}: React.ComponentProps<'div'> & SlotNameProps) {\n    return (\n        <div\n            className={cn(\n                'min-h-4 font-medium tracking-tight col-start-2 line-clamp-1',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nfunction AlertDescription({\n    className,\n    slotName = 'alert-description',\n    ...props\n}: React.ComponentProps<'div'> & SlotNameProps) {\n    return (\n        <div\n            className={cn(\n                'gap-1 text-sm [&_p]:leading-relaxed col-start-2 grid justify-items-start text-muted-foreground',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport { Alert, AlertDescription, AlertTitle };\n","import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { focusRing } from '@/lib/language';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nfunction Checkbox({\n    className,\n    slotName = 'checkbox',\n    ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root> & SlotNameProps) {\n    return (\n        <CheckboxPrimitive.Root\n            className={cn(\n                `peer size-5 shadow-xs shrink-0 rounded-md border border-border transition-all disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground ${focusRing}`,\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        >\n            <CheckboxPrimitive.Indicator\n                data-slot=\"checkbox-indicator\"\n                className=\"flex items-center justify-center text-current transition-none\"\n            >\n                <CheckIcon className=\"size-3.5\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n}\n\nexport { Checkbox };\n","import * as React from 'react';\n\nexport type FieldOrientation = 'vertical' | 'horizontal';\n\nexport interface FieldContextValue {\n    controlId: string;\n    descriptionId: string;\n    errorId: string;\n    orientation: FieldOrientation;\n    invalid: boolean;\n    required: boolean;\n    hasDescription: boolean;\n    setHasDescription: (present: boolean) => void;\n}\n\nexport const FieldContext = React.createContext<FieldContextValue | null>(null);\n\nexport function useOptionalField(): FieldContextValue | null {\n    return React.useContext(FieldContext);\n}\n\nexport function useField(): FieldContextValue {\n    const field = useOptionalField();\n\n    if (!field) {\n        throw new Error('Field parts must be rendered inside a Field.');\n    }\n\n    return field;\n}\n","import * as React from 'react';\n\nimport { useOptionalField } from '@/components/ui/field-context';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\ninterface FieldErrorProps extends React.ComponentProps<'p'> {\n    message?: string;\n}\n\nexport function FieldError({\n    message,\n    className,\n    slotName = 'field-error',\n    ...props\n}: FieldErrorProps & SlotNameProps) {\n    const field = useOptionalField();\n\n    if (!message) {\n        return null;\n    }\n\n    return (\n        <p\n            id={field?.errorId}\n            className={cn(\n                'ml-1 text-xs font-medium text-destructive group-data-[orientation=horizontal]/field:col-span-2 group-data-[orientation=horizontal]/field:row-start-3',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        >\n            {message}\n        </p>\n    );\n}\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport {\n    FieldContext,\n    useField,\n    type FieldContextValue,\n    type FieldOrientation,\n} from '@/components/ui/field-context';\nimport { FieldError } from '@/components/ui/field-error';\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nexport interface FieldLabels {\n    requiredLabel: string;\n}\n\ninterface FieldProps extends React.ComponentProps<'div'> {\n    orientation?: FieldOrientation;\n    error?: string;\n    invalid?: boolean;\n    required?: boolean;\n}\n\nexport function Field({\n    className,\n    children,\n    id,\n    orientation = 'vertical',\n    error,\n    invalid,\n    required = false,\n    slotName = 'field',\n    ...props\n}: FieldProps & SlotNameProps) {\n    const generatedId = React.useId();\n    const fieldId = id ?? generatedId;\n    const [hasDescription, setHasDescription] = React.useState(false);\n    const isInvalid = invalid ?? Boolean(error);\n\n    const field = React.useMemo<FieldContextValue>(\n        () => ({\n            controlId: fieldId,\n            descriptionId: `${fieldId}-description`,\n            errorId: `${fieldId}-error`,\n            orientation,\n            invalid: isInvalid,\n            required,\n            hasDescription,\n            setHasDescription,\n        }),\n        [fieldId, orientation, isInvalid, required, hasDescription],\n    );\n\n    return (\n        <FieldContext.Provider value={field}>\n            <div\n                data-orientation={orientation}\n                data-invalid={isInvalid ? 'true' : undefined}\n                className={cn(\n                    'group/field',\n                    orientation === 'horizontal'\n                        ? 'gap-x-4 gap-y-1 grid grid-cols-[1fr_auto] items-center'\n                        : 'gap-2 flex flex-col',\n                    className,\n                )}\n                {...props}\n                data-slot={slotName}\n            >\n                {children}\n                <FieldError message={error} />\n            </div>\n        </FieldContext.Provider>\n    );\n}\n\nexport function FieldGroup({\n    className,\n    slotName = 'field-group',\n    ...props\n}: React.ComponentProps<'div'> & SlotNameProps) {\n    return (\n        <div\n            className={cn('gap-6 flex w-full flex-col', className)}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\ninterface FieldLabelProps extends React.ComponentProps<typeof Label> {\n    requiredLabel?: FieldLabels['requiredLabel'];\n}\n\nexport function FieldLabel({\n    className,\n    children,\n    requiredLabel = 'Required',\n    slotName = 'field-label',\n    ...props\n}: FieldLabelProps & SlotNameProps) {\n    const { controlId, invalid, required } = useField();\n\n    return (\n        <Label\n            htmlFor={controlId}\n            className={cn(\n                'gap-1 flex items-center group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-1',\n                invalid && 'text-destructive',\n                className,\n            )}\n            {...props}\n            slotName={slotName}\n        >\n            {children}\n            {required ? (\n                <>\n                    <span\n                        data-slot=\"field-required\"\n                        aria-hidden=\"true\"\n                        className=\"text-destructive\"\n                    >\n                        *\n                    </span>\n                    <span className=\"sr-only\">{requiredLabel}</span>\n                </>\n            ) : null}\n        </Label>\n    );\n}\n\nexport function FieldDescription({\n    className,\n    slotName = 'field-description',\n    ...props\n}: React.ComponentProps<'p'> & SlotNameProps) {\n    const { descriptionId, setHasDescription } = useField();\n\n    React.useEffect(() => {\n        setHasDescription(true);\n\n        return () => setHasDescription(false);\n    }, [setHasDescription]);\n\n    return (\n        <p\n            id={descriptionId}\n            className={cn(\n                'ml-1 text-xs font-medium text-muted-foreground group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-2',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport function FieldControl({\n    className,\n    ...props\n}: React.ComponentProps<typeof Slot>) {\n    const {\n        controlId,\n        descriptionId,\n        errorId,\n        invalid,\n        required,\n        hasDescription,\n    } = useField();\n\n    const requiredProps: React.InputHTMLAttributes<HTMLElement> = required\n        ? { required: true }\n        : {};\n\n    const describedBy = [\n        hasDescription ? descriptionId : null,\n        invalid ? errorId : null,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    return (\n        <Slot\n            data-field-control=\"true\"\n            id={controlId}\n            aria-describedby={describedBy || undefined}\n            aria-invalid={invalid ? true : undefined}\n            {...requiredProps}\n            className={cn(\n                'group-data-[orientation=horizontal]/field:col-start-2 group-data-[orientation=horizontal]/field:row-span-2 group-data-[orientation=horizontal]/field:row-start-1 group-data-[orientation=horizontal]/field:justify-self-end',\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n","import { Eye, EyeOff } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { cn } from '@/lib/utils';\nimport { useUiLabels } from '@/locales/context';\nimport type { SlotNameProps } from '@/types';\n\nexport interface PasswordInputLabels {\n    showLabel: string;\n    hideLabel: string;\n}\n\nexport const passwordInputDefaultLabels: PasswordInputLabels = {\n    showLabel: 'Show password',\n    hideLabel: 'Hide password',\n};\n\ninterface PasswordInputProps extends Omit<\n    React.ComponentProps<typeof Input>,\n    'type'\n> {\n    revealable?: boolean;\n    showLabel?: PasswordInputLabels['showLabel'];\n    hideLabel?: PasswordInputLabels['hideLabel'];\n}\n\nexport function PasswordInput({\n    className,\n    revealable = true,\n    showLabel,\n    hideLabel,\n    slotName = 'password-input',\n    ...props\n}: PasswordInputProps & SlotNameProps) {\n    const labels = useUiLabels('passwordInput', passwordInputDefaultLabels, {\n        showLabel,\n        hideLabel,\n    });\n    const [visible, setVisible] = React.useState(false);\n\n    return (\n        <div className=\"relative w-full\" data-slot={slotName}>\n            <Input\n                type={visible ? 'text' : 'password'}\n                className={cn(revealable && 'pr-12', className)}\n                {...props}\n            />\n            {revealable ? (\n                <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    slotName=\"password-input-toggle\"\n                    aria-label={visible ? labels.hideLabel : labels.showLabel}\n                    aria-pressed={visible}\n                    disabled={props.disabled}\n                    onMouseDown={(event) => event.preventDefault()}\n                    onClick={() => setVisible((current) => !current)}\n                    className=\"right-1 absolute top-1/2 -translate-y-1/2\"\n                >\n                    {visible ? (\n                        <EyeOff aria-hidden=\"true\" />\n                    ) : (\n                        <Eye aria-hidden=\"true\" />\n                    )}\n                </Button>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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","names":["jsx","jsx","React","jsx","React","jsx","jsxs"]}

package/dist/chunk-BP2YDMMI.js

@@ -0,0 +1,29 @@
+import {
+  cn
+} from "./chunk-PPWJK5T3.js";
+
+// src/components/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx } from "react/jsx-runtime";
+function Label({
+  className,
+  slotName = "label",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      className: cn(
+        "text-sm font-medium text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      "data-slot": slotName
+    }
+  );
+}
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-BP2YDMMI.js.map

package/dist/chunk-BP2YDMMI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/label.tsx"],"sourcesContent":["import * as LabelPrimitive from '@radix-ui/react-label';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nfunction Label({\n    className,\n    slotName = 'label',\n    ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root> & SlotNameProps) {\n    return (\n        <LabelPrimitive.Root\n            className={cn(\n                'text-sm font-medium text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAAA,YAAY,oBAAoB;AAYxB;AANR,SAAS,MAAM;AAAA,EACX;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACP,GAAqE;AACjE,SACI;AAAA,IAAgB;AAAA,IAAf;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MACJ,aAAW;AAAA;AAAA,EACf;AAER;","names":[]}