@maxsteinwender/sort-ui 0.1.0 → 1.0.2

package/LICENSE

@@ -0,0 +1 @@
+This project uses design tokens from the Sort UI Kit. All code is proprietary.

package/README.md

@@ -2,6 +2,41 @@
 
 A coded design system based on the [Sort UI Kit](https://sortui.company) — Figma components translated into production-ready Next.js components, documented in Storybook.
 
+**npm package:** [`@maxsteinwender/sort-ui`](https://www.npmjs.com/package/@maxsteinwender/sort-ui)
+
+## Install
+
+```bash
+npm install @maxsteinwender/sort-ui
+```
+
+**Usage:**
+
+```tsx
+// 1. Import styles once in your app root (e.g. layout.tsx, _app.tsx, main.tsx)
+import '@maxsteinwender/sort-ui/styles.css'
+
+// 2. Import components
+import { Button, Avatar, StatusBadge } from '@maxsteinwender/sort-ui'
+```
+
+**Next.js with Tailwind (optional):** extend your Tailwind config with Sort UI tokens:
+
+```js
+// tailwind.config.js
+import sortUIPreset from '@maxsteinwender/sort-ui/tailwind-preset'
+
+export default {
+  presets: [sortUIPreset],
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@maxsteinwender/sort-ui/dist/**/*.js',
+  ],
+}
+```
+
+---
+
 ## Overview
 
 | | |

package/dist/form.d.mts

@@ -0,0 +1,28 @@
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form.d.ts

@@ -0,0 +1,28 @@
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form.js

@@ -0,0 +1,203 @@
+"use client";
+'use strict';
+
+var React2 = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var reactHookForm = require('react-hook-form');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var LabelPrimitive = require('@radix-ui/react-label');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-5 text-sui-text-default"
+);
+var Label = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, required, supportText, tailIcon, children } = _b, props = __objRest(_b, ["className", "required", "supportText", "tailIcon", "children"]);
+  const hasTail = !!(supportText || tailIcon);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    LabelPrimitive__namespace.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        // peer-disabled must be on the outer label — it's the direct sibling of the peer input
+        "inline-flex items-center peer-disabled:cursor-not-allowed peer-disabled:text-sui-text-hint",
+        hasTail ? "w-full justify-between" : "gap-1",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(labelVariants(), "flex items-center gap-1"), children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-sm font-semibold leading-5 text-sui-text-destructive", children: "*" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "(required)" })
+          ] })
+        ] }),
+        hasTail && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+          supportText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: supportText }),
+          tailIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-5 flex items-center justify-center", children: tailIcon })
+        ] })
+      ]
+    })
+  );
+});
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var Form = reactHookForm.FormProvider;
+var FormFieldContext = React2__namespace.createContext(null);
+var FormField = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, __spreadValues({}, props)) });
+};
+var useFormField = () => {
+  const fieldContext = React2__namespace.useContext(FormFieldContext);
+  const itemContext = React2__namespace.useContext(FormItemContext);
+  const { getFieldState, formState } = reactHookForm.useFormContext();
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return __spreadValues({
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`
+  }, fieldState);
+};
+var FormItemContext = React2__namespace.createContext(null);
+var FormItem = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const id = React2__namespace.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ ref, className: cn("space-y-2", className) }, props)) });
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Label,
+    __spreadValues({
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId
+    }, props)
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React2__namespace.forwardRef((_a, ref) => {
+  var props = __objRest(_a, []);
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactSlot.Slot,
+    __spreadValues({
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error
+    }, props)
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    __spreadValues({
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-sui-text-muted", className)
+    }, props)
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React2__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  var _a2;
+  const { error, formMessageId } = useFormField();
+  const body = error ? String((_a2 = error == null ? void 0 : error.message) != null ? _a2 : "") : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    __spreadProps(__spreadValues({
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className)
+    }, props), {
+      children: body
+    })
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+exports.Form = Form;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = useFormField;

package/dist/form.mjs

@@ -0,0 +1,173 @@
+"use client";
+import * as React2 from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { useFormContext, FormProvider, Controller } from 'react-hook-form';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var labelVariants = cva(
+  "text-sm font-medium leading-5 text-sui-text-default"
+);
+var Label = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, required, supportText, tailIcon, children } = _b, props = __objRest(_b, ["className", "required", "supportText", "tailIcon", "children"]);
+  const hasTail = !!(supportText || tailIcon);
+  return /* @__PURE__ */ jsxs(
+    LabelPrimitive.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        // peer-disabled must be on the outer label — it's the direct sibling of the peer input
+        "inline-flex items-center peer-disabled:cursor-not-allowed peer-disabled:text-sui-text-hint",
+        hasTail ? "w-full justify-between" : "gap-1",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: cn(labelVariants(), "flex items-center gap-1"), children: [
+          children,
+          required && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-sm font-semibold leading-5 text-sui-text-destructive", children: "*" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(required)" })
+          ] })
+        ] }),
+        hasTail && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          supportText && /* @__PURE__ */ jsx("span", { className: "text-sm font-normal leading-5 text-sui-text-muted", children: supportText }),
+          tailIcon && /* @__PURE__ */ jsx("span", { className: "size-5 flex items-center justify-center", children: tailIcon })
+        ] })
+      ]
+    })
+  );
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+var Form = FormProvider;
+var FormFieldContext = React2.createContext(null);
+var FormField = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, __spreadValues({}, props)) });
+};
+var useFormField = () => {
+  const fieldContext = React2.useContext(FormFieldContext);
+  const itemContext = React2.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return __spreadValues({
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`
+  }, fieldState);
+};
+var FormItemContext = React2.createContext(null);
+var FormItem = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const id = React2.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", __spreadValues({ ref, className: cn("space-y-2", className) }, props)) });
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    __spreadValues({
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId
+    }, props)
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React2.forwardRef((_a, ref) => {
+  var props = __objRest(_a, []);
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    __spreadValues({
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error
+    }, props)
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    __spreadValues({
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-sui-text-muted", className)
+    }, props)
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  var _a2;
+  const { error, formMessageId } = useFormField();
+  const body = error ? String((_a2 = error == null ? void 0 : error.message) != null ? _a2 : "") : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    __spreadProps(__spreadValues({
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className)
+    }, props), {
+      children: body
+    })
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/index.d.mts

@@ -16,9 +16,6 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { DialogProps } from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as _radix_ui_react_slot from '@radix-ui/react-slot';
-import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -408,12 +405,24 @@ declare namespace CalendarDayButton {
     var displayName: string;
 }
 
-declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const cardVariants: (props?: ({
+    variant?: "default" | "flat" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+interface CardCoverProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Edge-to-edge cover — no inner radius, no inner border. */
+    flush?: boolean;
+    /** CSS aspect-ratio string (e.g. "3/2", "16/9"). Default: "3/2". */
+    aspectRatio?: string;
+}
+declare const CardCover: React$1.ForwardRefExoticComponent<CardCoverProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const THEMES: {
     readonly light: "";
@@ -1002,26 +1011,6 @@ interface FileUploadCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement
 }
 declare const FileUploadCard: React$1.ForwardRefExoticComponent<FileUploadCardProps & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
-declare const useFormField: () => {
-    invalid: boolean;
-    isDirty: boolean;
-    isTouched: boolean;
-    isValidating: boolean;
-    error?: react_hook_form.FieldError;
-    id: string;
-    name: string;
-    formItemId: string;
-    formDescriptionId: string;
-    formMessageId: string;
-};
-declare const FormItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const FormLabel: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
-declare const FormControl: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
-declare const FormDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
-
 declare const gridTableHeaderItemVariants: (props?: ({
     variant?: "label" | "checkbox" | "icon" | "empty" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2235,4 +2224,4 @@ interface VerticalStepperItemProps extends React$1.HTMLAttributes<HTMLDivElement
 }
 declare const VerticalStepperItem: React$1.ForwardRefExoticComponent<VerticalStepperItemProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemVariant, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarButton, type AvatarButtonProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarGroupStacking, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeColor, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, type BreadcrumbItemData, type BreadcrumbItemState, type BreadcrumbItemType, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbVariant, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonProps, Calendar, CalendarDayButton, type CaptionColor, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, type CheckboxListProps, CheckboxWithText, Chip, type ChipProps, CodeBlock, type CodeBlockProps, type CodeBlockTab, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, type ControlButtonProps, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerProps, DatePickerWithPresets, type DatePickerWithPresetsProps, type DatePreset, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, type DividerProps, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, type FileUploadAreaProps, FileUploadCard, type FileUploadCardProps, type FileUploadProps, FilterButton, type FilterButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GridSortDirection, GridTableCell, type GridTableCellProps, GridTableHeaderItem, type GridTableHeaderItemProps, GridTableRow, type GridTableRowProps, GridTableSlotItem, type GridTableSlotItemProps, HorizontalStepper, HorizontalStepperItem, type HorizontalStepperItemProps, type HorizontalStepperProps, InlineTips, Input, InputButton, type InputButtonProps, InputCaption, type InputCaptionProps, InputField, type InputFieldProps, InputStepper, type InputStepperProps, Label, LinkButton, type LinkButtonProps, MenuSearchInput, type MenuSearchInputProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, type PageItemProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, type PaginatorProps, type PasswordRequirement, Popover, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadialProgressBar, type RadialProgressBarProps, RadioButton, RadioButtonCard, RadioButtonList, type RadioButtonListProps, RadioButtonWithText, RadioCardGroup, RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, type SelectInputProps, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, type SelectMenuFooterButtonProps, type SelectMenuIndicator, SelectMenuItem, type SelectMenuItemProps, SelectMenuLabel, type SelectMenuLabelProps, SelectMenuLargeItem, type SelectMenuLargeItemProps, type SelectMenuProps, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Toaster as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, type SidebarCardProps, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, type SlotState, type SocialBrand, SocialButton, type SocialButtonProps, SortBreadcrumb, SortBreadcrumbItem, type SortBreadcrumbItemProps, type SortBreadcrumbProps, type SortDirection, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeVariant, type StepperColorMode, StepperIcon, type StepperIconProps, StepperNumber, type StepperNumberProps, type StepperState, type StepperStep, type StepperVariant, Switch, SwitchList, type SwitchListProps, SwitchWithText, type SwitchWithTextProps, TabItem, type TabItemProps, TabList, type TabListProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, type TablePaginationProps, TableRow, TableRowSort, type TableSkeletonColumn, TableSkeletonRow, type TableSkeletonRowProps, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, type TextAreaFieldProps, Textarea, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster$1 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, type UploadFile, Userbar, type UserbarProps, VerticalStepper, type VerticalStepperColorMode, VerticalStepperItem, type VerticalStepperItemProps, type VerticalStepperProps, type VerticalStepperStep, accordionItemVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useFormField, useSidebar, userbarVariants, validateFile };
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemVariant, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarButton, type AvatarButtonProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarGroupStacking, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeColor, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, type BreadcrumbItemData, type BreadcrumbItemState, type BreadcrumbItemType, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbVariant, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonProps, Calendar, CalendarDayButton, type CaptionColor, Card, CardContent, CardCover, type CardCoverProps, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, type CheckboxListProps, CheckboxWithText, Chip, type ChipProps, CodeBlock, type CodeBlockProps, type CodeBlockTab, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, type ControlButtonProps, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerProps, DatePickerWithPresets, type DatePickerWithPresetsProps, type DatePreset, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, type DividerProps, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, type FileUploadAreaProps, FileUploadCard, type FileUploadCardProps, type FileUploadProps, FilterButton, type FilterButtonProps, type GridSortDirection, GridTableCell, type GridTableCellProps, GridTableHeaderItem, type GridTableHeaderItemProps, GridTableRow, type GridTableRowProps, GridTableSlotItem, type GridTableSlotItemProps, HorizontalStepper, HorizontalStepperItem, type HorizontalStepperItemProps, type HorizontalStepperProps, InlineTips, Input, InputButton, type InputButtonProps, InputCaption, type InputCaptionProps, InputField, type InputFieldProps, InputStepper, type InputStepperProps, Label, LinkButton, type LinkButtonProps, MenuSearchInput, type MenuSearchInputProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, type PageItemProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, type PaginatorProps, type PasswordRequirement, Popover, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadialProgressBar, type RadialProgressBarProps, RadioButton, RadioButtonCard, RadioButtonList, type RadioButtonListProps, RadioButtonWithText, RadioCardGroup, RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, type SelectInputProps, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, type SelectMenuFooterButtonProps, type SelectMenuIndicator, SelectMenuItem, type SelectMenuItemProps, SelectMenuLabel, type SelectMenuLabelProps, SelectMenuLargeItem, type SelectMenuLargeItemProps, type SelectMenuProps, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Toaster as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, type SidebarCardProps, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, type SidebarMenuItemProps, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, type SlotState, type SocialBrand, SocialButton, type SocialButtonProps, SortBreadcrumb, SortBreadcrumbItem, type SortBreadcrumbItemProps, type SortBreadcrumbProps, type SortDirection, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeVariant, type StepperColorMode, StepperIcon, type StepperIconProps, StepperNumber, type StepperNumberProps, type StepperState, type StepperStep, type StepperVariant, Switch, SwitchList, type SwitchListProps, SwitchWithText, type SwitchWithTextProps, TabItem, type TabItemProps, TabList, type TabListProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, type TablePaginationProps, TableRow, TableRowSort, type TableSkeletonColumn, TableSkeletonRow, type TableSkeletonRowProps, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, type TextAreaFieldProps, Textarea, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster$1 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, type UploadFile, Userbar, type UserbarProps, VerticalStepper, type VerticalStepperColorMode, VerticalStepperItem, type VerticalStepperItemProps, type VerticalStepperProps, type VerticalStepperStep, accordionItemVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, cardVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useSidebar, userbarVariants, validateFile };