@maxsteinwender/sort-ui 1.0.8 → 1.1.1

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="public/visuals/Key Visual.png" alt="Hero Image" width="100%" />
+</p>
+
 # Sort UI Design System
 
 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.

package/dist/index.d.mts

@@ -417,6 +417,22 @@ 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> {
+    /**
+     * Renders the card as a clickable surface — adds focus ring, subtle
+     * scale-press, and `cursor-pointer`. Use with an `onClick` handler or
+     * pair with `asChild` to render the card as `<a>` / `<button>`.
+     *
+     * Web Interface Guidelines #24 — press scale ~0.97, never 0.8.
+     * WIG #28 — hover effects gated behind `[@media(hover:hover)]`.
+     */
+    interactive?: boolean;
+    /**
+     * Render the card via Radix Slot, passing all props/styles to the child
+     * element. Use when the card itself should be an `<a>` or `<button>` for
+     * navigation/action semantics. Mutually exclusive with rendering as a
+     * non-interactive `<div>` — pair with `interactive` for full effect.
+     */
+    asChild?: boolean;
 }
 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>>;
@@ -495,7 +511,19 @@ declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1
 declare const checkboxVariants: (props?: ({
     variant?: "default" | "shadow" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
+interface CheckboxProps extends Omit<React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked">, VariantProps<typeof checkboxVariants> {
+    /**
+     * Standard Radix `checked` value. Pass `"indeterminate"` for the
+     * indeterminate state, OR pass the boolean `indeterminate` prop below
+     * which is more ergonomic for parent/child "Select All" patterns.
+     */
+    checked?: boolean | "indeterminate";
+    /**
+     * Boolean shorthand for the indeterminate state. When `true`, takes
+     * precedence over `checked` and renders `aria-checked="mixed"` via Radix.
+     * Useful for "Select All" rows when only some children are checked.
+     */
+    indeterminate?: boolean;
 }
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -1154,6 +1182,14 @@ interface InlineTipsProps extends React$1.HTMLAttributes<HTMLDivElement>, Varian
 }
 declare const InlineTips: React$1.ForwardRefExoticComponent<InlineTipsProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Sort UI Input — restyled shadcn primitive.
+ *
+ * Web Interface Guideline defaults (override per-instance if needed):
+ *  - #4  spellCheck={false}, autoComplete="off"
+ *  - #29 16px font on touch (text-base), shrinks to 14px (text-sm) on md+ to prevent iOS zoom on focus
+ *  - #42 Focus ring uses box-shadow (ring), not outline — respects border-radius
+ */
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const inputButtonVariants: (props?: ({
@@ -1245,6 +1281,16 @@ interface InputFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElem
     /** Additional className applied to the inner <input> element */
     inputClassName?: string;
 }
+/**
+ * Sort UI InputField — labelled input with optional lead/tail/prefix/suffix slots.
+ *
+ * Web Interface Guideline defaults (override per-instance if needed):
+ *  - #1  Label htmlFor wires label clicks to focus the input
+ *  - #4  spellCheck={false}, autoComplete="off" by default on inner <input>
+ *  - #5  Pass-through `required` attribute for HTML form validation
+ *  - #6  Clicks anywhere inside the container (prefix/suffix/icons) focus the input
+ *  - #29 Inner input uses 16px on touch (text-base) → 14px on md+ (md:text-sm) to prevent iOS zoom on focus
+ */
 declare const InputField: React$1.ForwardRefExoticComponent<InputFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface InputStepperProps {
@@ -2081,8 +2127,24 @@ interface TextAreaFieldProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTex
     /** Wrapper className */
     className?: string;
 }
+/**
+ * Sort UI TextAreaField — labelled multi-line input with optional toolbar/action bar.
+ *
+ * Web Interface Guideline defaults:
+ *  - #1  Label htmlFor wires label clicks to focus the textarea
+ *  - #4  spellCheck={false}, autoComplete="off" by default — pass spellCheck explicitly for prose fields
+ *  - #5  Pass-through `required` attribute
+ *  - #6  Clicks anywhere inside the container (lead/tail action gutter, padding) focus the textarea
+ *  - #29 Inner textarea uses 16px on touch (text-base) → 14px on md+ to prevent iOS zoom
+ */
 declare const TextAreaField: React$1.ForwardRefExoticComponent<TextAreaFieldProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * Sort UI Textarea — restyled shadcn primitive.
+ * Web Interface Guideline defaults:
+ *  - #4  spellCheck={false} default (textareas often want spellcheck — pass spellCheck explicitly to opt in)
+ *  - #29 16px on touch (text-base) → 14px on md+ to prevent iOS zoom on focus
+ */
 declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const toggleVariants: (props?: ({

package/dist/index.d.ts

@@ -417,6 +417,22 @@ 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> {
+    /**
+     * Renders the card as a clickable surface — adds focus ring, subtle
+     * scale-press, and `cursor-pointer`. Use with an `onClick` handler or
+     * pair with `asChild` to render the card as `<a>` / `<button>`.
+     *
+     * Web Interface Guidelines #24 — press scale ~0.97, never 0.8.
+     * WIG #28 — hover effects gated behind `[@media(hover:hover)]`.
+     */
+    interactive?: boolean;
+    /**
+     * Render the card via Radix Slot, passing all props/styles to the child
+     * element. Use when the card itself should be an `<a>` or `<button>` for
+     * navigation/action semantics. Mutually exclusive with rendering as a
+     * non-interactive `<div>` — pair with `interactive` for full effect.
+     */
+    asChild?: boolean;
 }
 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>>;
@@ -495,7 +511,19 @@ declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1
 declare const checkboxVariants: (props?: ({
     variant?: "default" | "shadow" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
+interface CheckboxProps extends Omit<React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked">, VariantProps<typeof checkboxVariants> {
+    /**
+     * Standard Radix `checked` value. Pass `"indeterminate"` for the
+     * indeterminate state, OR pass the boolean `indeterminate` prop below
+     * which is more ergonomic for parent/child "Select All" patterns.
+     */
+    checked?: boolean | "indeterminate";
+    /**
+     * Boolean shorthand for the indeterminate state. When `true`, takes
+     * precedence over `checked` and renders `aria-checked="mixed"` via Radix.
+     * Useful for "Select All" rows when only some children are checked.
+     */
+    indeterminate?: boolean;
 }
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -1154,6 +1182,14 @@ interface InlineTipsProps extends React$1.HTMLAttributes<HTMLDivElement>, Varian
 }
 declare const InlineTips: React$1.ForwardRefExoticComponent<InlineTipsProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Sort UI Input — restyled shadcn primitive.
+ *
+ * Web Interface Guideline defaults (override per-instance if needed):
+ *  - #4  spellCheck={false}, autoComplete="off"
+ *  - #29 16px font on touch (text-base), shrinks to 14px (text-sm) on md+ to prevent iOS zoom on focus
+ *  - #42 Focus ring uses box-shadow (ring), not outline — respects border-radius
+ */
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const inputButtonVariants: (props?: ({
@@ -1245,6 +1281,16 @@ interface InputFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElem
     /** Additional className applied to the inner <input> element */
     inputClassName?: string;
 }
+/**
+ * Sort UI InputField — labelled input with optional lead/tail/prefix/suffix slots.
+ *
+ * Web Interface Guideline defaults (override per-instance if needed):
+ *  - #1  Label htmlFor wires label clicks to focus the input
+ *  - #4  spellCheck={false}, autoComplete="off" by default on inner <input>
+ *  - #5  Pass-through `required` attribute for HTML form validation
+ *  - #6  Clicks anywhere inside the container (prefix/suffix/icons) focus the input
+ *  - #29 Inner input uses 16px on touch (text-base) → 14px on md+ (md:text-sm) to prevent iOS zoom on focus
+ */
 declare const InputField: React$1.ForwardRefExoticComponent<InputFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface InputStepperProps {
@@ -2081,8 +2127,24 @@ interface TextAreaFieldProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTex
     /** Wrapper className */
     className?: string;
 }
+/**
+ * Sort UI TextAreaField — labelled multi-line input with optional toolbar/action bar.
+ *
+ * Web Interface Guideline defaults:
+ *  - #1  Label htmlFor wires label clicks to focus the textarea
+ *  - #4  spellCheck={false}, autoComplete="off" by default — pass spellCheck explicitly for prose fields
+ *  - #5  Pass-through `required` attribute
+ *  - #6  Clicks anywhere inside the container (lead/tail action gutter, padding) focus the textarea
+ *  - #29 Inner textarea uses 16px on touch (text-base) → 14px on md+ to prevent iOS zoom
+ */
 declare const TextAreaField: React$1.ForwardRefExoticComponent<TextAreaFieldProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * Sort UI Textarea — restyled shadcn primitive.
+ * Web Interface Guideline defaults:
+ *  - #4  spellCheck={false} default (textareas often want spellcheck — pass spellCheck explicitly to opt in)
+ *  - #29 16px on touch (text-base) → 14px on md+ to prevent iOS zoom on focus
+ */
 declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const toggleVariants: (props?: ({