@ladder-ui/field 0.4.0 → 0.5.0

package/dist/field.css

@@ -1,47 +1 @@
-@layer components {
-  .lui-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--lui-field-gap);
-  }
-  .lui-field--horizontal {
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--lui-field-gap);
-  }
-  .lui-field[data-disabled=true] .lui-field-label,
-  .lui-field[data-disabled=true] .lui-field-description {
-    opacity: 0.5;
-  }
-  .lui-field[data-invalid=true] .lui-field-label {
-    color: var(--lui-field-error-color);
-  }
-  .lui-field-label {
-    display: block;
-    color: var(--lui-field-label-color);
-    font-family: var(--lui-font-family);
-    font-size: var(--lui-field-label-size);
-    font-weight: 400;
-    line-height: 1.4;
-  }
-  .lui-field-description {
-    margin: 0;
-    color: var(--lui-field-description-color);
-    font-family: var(--lui-font-family);
-    font-size: var(--lui-field-description-size);
-    line-height: 1.5;
-  }
-  .lui-field-error {
-    margin: 0;
-    color: var(--lui-field-error-color);
-    font-family: var(--lui-font-family);
-    font-size: var(--lui-field-error-size);
-    line-height: 1.5;
-  }
-  .lui-field-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--lui-field-group-gap);
-  }
-}
+@layer components{.lui-field{display:flex;flex-direction:column;gap:var(--lui-field-gap)}.lui-field--horizontal{align-items:center;flex-direction:row;flex-wrap:wrap;gap:var(--lui-field-gap)}.lui-field[data-disabled=true] .lui-field-description,.lui-field[data-disabled=true] .lui-field-label{opacity:.5}.lui-field[data-invalid=true] .lui-field-label{color:var(--lui-field-error-color)}.lui-field-label{color:var(--lui-field-label-color);display:block;font-family:var(--lui-font-family);font-size:var(--lui-field-label-size);font-weight:400;line-height:1.4}.lui-field-description{color:var(--lui-field-description-color);font-size:var(--lui-field-description-size)}.lui-field-description,.lui-field-error{font-family:var(--lui-font-family);line-height:1.5;margin:0}.lui-field-error{color:var(--lui-field-error-color);font-size:var(--lui-field-error-size)}.lui-field-group{display:flex;flex-direction:column;gap:var(--lui-field-group-gap)}}

package/dist/field.vars.css

@@ -1,15 +1 @@
-@charset "UTF-8";
-:root {
-  /* Layout */
-  --lui-field-gap: 0.375rem;
-  --lui-field-group-gap: 1rem;
-  /* Label — field-specific overrides of @ladder-ui/label base tokens */
-  --lui-field-label-color: var(--lui-text-primary);
-  --lui-field-label-size: var(--lui-font-size-sm);
-  /* Description */
-  --lui-field-description-color: color-mix(in srgb, var(--lui-text-primary) 60%, transparent);
-  --lui-field-description-size: var(--lui-font-size-xs);
-  /* Error */
-  --lui-field-error-color: var(--lui-error);
-  --lui-field-error-size: var(--lui-font-size-xs);
-}
+:root{--lui-field-gap:0.375rem;--lui-field-group-gap:1rem;--lui-field-label-color:var(--lui-text-primary);--lui-field-label-size:var(--lui-font-size-sm);--lui-field-description-color:color-mix(in srgb,var(--lui-text-primary) 60%,transparent);--lui-field-description-size:var(--lui-font-size-xs);--lui-field-error-color:var(--lui-error);--lui-field-error-size:var(--lui-font-size-xs)}

package/dist/index.js

@@ -1,78 +1 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
-var label = require('@ladder-ui/label');
-
-/**
- * Field — semantic wrapper for a single form field.
- *
- * Provides layout (label + control + description + error) and propagates
- * disabled/invalid state to child components via `data-disabled` / `data-invalid`
- * HTML attributes, which are picked up by CSS selectors.
- *
- * Usage:
- * ```tsx
- * <Field>
- *   <FieldLabel htmlFor="email">Email</FieldLabel>
- *   <Input id="email" type="email" />
- *   <FieldDescription>We'll never share your email.</FieldDescription>
- * </Field>
- *
- * <Field data-invalid="true">
- *   <FieldLabel htmlFor="user">Username</FieldLabel>
- *   <Input id="user" status="error" aria-invalid="true" />
- *   <FieldError>Username already taken.</FieldError>
- * </Field>
- * ```
- */
-function Field({ ref, className, orientation = "vertical", ...props }) {
-    return (jsxRuntime.jsx("div", { ref: ref, className: concatClassNames("lui-field", orientation === "horizontal" && "lui-field--horizontal", className), ...props }));
-}
-Field.displayName = "Field";
-/**
- * FieldLabel — a `Label` scoped to a `Field` compound component.
- *
- * Wraps `@ladder-ui/label`'s `Label` and adds the `lui-field-label` class so
- * the parent `Field` can apply context-aware styles:
- *   - Dims when `<Field data-disabled="true">` is set
- *   - Turns error-color when `<Field data-invalid="true">` is set
- *
- * For labels **outside a Field** context, use `Label` from `@ladder-ui/label`
- * directly — it provides the same accessible `<label>` element with styling
- * but without the Field-specific context.
- */
-function FieldLabel({ ref, className, ...props }) {
-    return (jsxRuntime.jsx(label.Label, { ref: ref, className: concatClassNames("lui-field-label", className), ...props }));
-}
-FieldLabel.displayName = "FieldLabel";
-/**
- * FieldDescription — muted helper text rendered below the control.
- * Dims automatically when the parent `<Field>` has `data-disabled="true"`.
- */
-function FieldDescription({ ref, className, ...props }) {
-    return (jsxRuntime.jsx("p", { ref: ref, className: concatClassNames("lui-field-description", className), ...props }));
-}
-FieldDescription.displayName = "FieldDescription";
-/**
- * FieldError — error text rendered below the control.
- * Has `role="alert"` for live-region announcements.
- * Only meaningful when the parent `<Field>` has `data-invalid="true"`.
- */
-function FieldError({ ref, className, ...props }) {
-    return (jsxRuntime.jsx("p", { ref: ref, role: "alert", className: concatClassNames("lui-field-error", className), ...props }));
-}
-FieldError.displayName = "FieldError";
-/**
- * FieldGroup — groups multiple `<Field>` elements with a consistent vertical gap.
- */
-function FieldGroup({ ref, className, ...props }) {
-    return (jsxRuntime.jsx("div", { ref: ref, className: concatClassNames("lui-field-group", className), ...props }));
-}
-FieldGroup.displayName = "FieldGroup";
-
-exports.Field = Field;
-exports.FieldDescription = FieldDescription;
-exports.FieldError = FieldError;
-exports.FieldGroup = FieldGroup;
-exports.FieldLabel = FieldLabel;
+"use strict";var e=require("react/jsx-runtime"),r=require("@ladder-ui/core/concatClassNames"),i=require("@ladder-ui/label");function l({ref:i,className:l,orientation:a="vertical",...s}){return e.jsx("div",{ref:i,className:r("lui-field","horizontal"===a&&"lui-field--horizontal",l),...s})}function a({ref:l,className:a,...s}){return e.jsx(i.Label,{ref:l,className:r("lui-field-label",a),...s})}function s({ref:i,className:l,...a}){return e.jsx("p",{ref:i,className:r("lui-field-description",l),...a})}function t({ref:i,className:l,...a}){return e.jsx("p",{ref:i,role:"alert",className:r("lui-field-error",l),...a})}function d({ref:i,className:l,...a}){return e.jsx("div",{ref:i,className:r("lui-field-group",l),...a})}l.displayName="Field",a.displayName="FieldLabel",s.displayName="FieldDescription",t.displayName="FieldError",d.displayName="FieldGroup",exports.Field=l,exports.FieldDescription=s,exports.FieldError=t,exports.FieldGroup=d,exports.FieldLabel=a;

package/dist/index.mjs

@@ -1,72 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
-import { Label } from '@ladder-ui/label';
-
-/**
- * Field — semantic wrapper for a single form field.
- *
- * Provides layout (label + control + description + error) and propagates
- * disabled/invalid state to child components via `data-disabled` / `data-invalid`
- * HTML attributes, which are picked up by CSS selectors.
- *
- * Usage:
- * ```tsx
- * <Field>
- *   <FieldLabel htmlFor="email">Email</FieldLabel>
- *   <Input id="email" type="email" />
- *   <FieldDescription>We'll never share your email.</FieldDescription>
- * </Field>
- *
- * <Field data-invalid="true">
- *   <FieldLabel htmlFor="user">Username</FieldLabel>
- *   <Input id="user" status="error" aria-invalid="true" />
- *   <FieldError>Username already taken.</FieldError>
- * </Field>
- * ```
- */
-function Field({ ref, className, orientation = "vertical", ...props }) {
-    return (jsx("div", { ref: ref, className: concatClassNames("lui-field", orientation === "horizontal" && "lui-field--horizontal", className), ...props }));
-}
-Field.displayName = "Field";
-/**
- * FieldLabel — a `Label` scoped to a `Field` compound component.
- *
- * Wraps `@ladder-ui/label`'s `Label` and adds the `lui-field-label` class so
- * the parent `Field` can apply context-aware styles:
- *   - Dims when `<Field data-disabled="true">` is set
- *   - Turns error-color when `<Field data-invalid="true">` is set
- *
- * For labels **outside a Field** context, use `Label` from `@ladder-ui/label`
- * directly — it provides the same accessible `<label>` element with styling
- * but without the Field-specific context.
- */
-function FieldLabel({ ref, className, ...props }) {
-    return (jsx(Label, { ref: ref, className: concatClassNames("lui-field-label", className), ...props }));
-}
-FieldLabel.displayName = "FieldLabel";
-/**
- * FieldDescription — muted helper text rendered below the control.
- * Dims automatically when the parent `<Field>` has `data-disabled="true"`.
- */
-function FieldDescription({ ref, className, ...props }) {
-    return (jsx("p", { ref: ref, className: concatClassNames("lui-field-description", className), ...props }));
-}
-FieldDescription.displayName = "FieldDescription";
-/**
- * FieldError — error text rendered below the control.
- * Has `role="alert"` for live-region announcements.
- * Only meaningful when the parent `<Field>` has `data-invalid="true"`.
- */
-function FieldError({ ref, className, ...props }) {
-    return (jsx("p", { ref: ref, role: "alert", className: concatClassNames("lui-field-error", className), ...props }));
-}
-FieldError.displayName = "FieldError";
-/**
- * FieldGroup — groups multiple `<Field>` elements with a consistent vertical gap.
- */
-function FieldGroup({ ref, className, ...props }) {
-    return (jsx("div", { ref: ref, className: concatClassNames("lui-field-group", className), ...props }));
-}
-FieldGroup.displayName = "FieldGroup";
-
-export { Field, FieldDescription, FieldError, FieldGroup, FieldLabel };
+import{jsx as e}from"react/jsx-runtime";import r from"@ladder-ui/core/concatClassNames";import{Label as l}from"@ladder-ui/label";function a({ref:l,className:a,orientation:i="vertical",...s}){return e("div",{ref:l,className:r("lui-field","horizontal"===i&&"lui-field--horizontal",a),...s})}function i({ref:a,className:i,...s}){return e(l,{ref:a,className:r("lui-field-label",i),...s})}function s({ref:l,className:a,...i}){return e("p",{ref:l,className:r("lui-field-description",a),...i})}function o({ref:l,className:a,...i}){return e("p",{ref:l,role:"alert",className:r("lui-field-error",a),...i})}function t({ref:l,className:a,...i}){return e("div",{ref:l,className:r("lui-field-group",a),...i})}a.displayName="Field",i.displayName="FieldLabel",s.displayName="FieldDescription",o.displayName="FieldError",t.displayName="FieldGroup";export{a as Field,s as FieldDescription,o as FieldError,t as FieldGroup,i as FieldLabel};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/field",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -31,7 +31,8 @@
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/field"
   },
   "bugs": {
     "url": "https://github.com/ivelaval/ladder-ui/issues"
@@ -48,8 +49,8 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.4.0",
-    "@ladder-ui/label": "0.4.0"
+    "@ladder-ui/core": "0.5.0",
+    "@ladder-ui/label": "0.5.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",