jvetrau-ds 0.2.1 → 0.2.3

package/components/button/button-presentation.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var classnames = require('../helpers/classnames');
+
+function buttonLink(className = "") {
+  return classnames.classnames(
+    "button",
+    className,
+    {
+      "button--link": true
+    }
+  );
+}
+
+exports.buttonLink = buttonLink;
+//# sourceMappingURL=button-presentation.cjs.map
+//# sourceMappingURL=button-presentation.cjs.map

package/components/button/button-presentation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button-presentation.ts"],"names":["classnames"],"mappings":";;;;AAEO,SAAS,UAAA,CACd,YAAY,EAAA,EACJ;AACR,EAAA,OAAOA,qBAAA;AAAA,IACL,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,cAAA,EAAgB;AAAA;AAClB,GACF;AACF","file":"button-presentation.cjs","sourcesContent":["import { classnames } from '../helpers/classnames';\n\nexport function buttonLink(\n  className = '',\n): string {\n  return classnames(\n    'button',\n    className,\n    {\n      'button--link': true,\n    },\n  );\n}\n"]}

package/components/button/button-presentation.d.ts

@@ -0,0 +1 @@
+export declare function buttonLink(className?: string): string;

package/components/button/button-presentation.js

@@ -0,0 +1,15 @@
+import { classnames } from '../helpers/classnames';
+
+function buttonLink(className = "") {
+  return classnames(
+    "button",
+    className,
+    {
+      "button--link": true
+    }
+  );
+}
+
+export { buttonLink };
+//# sourceMappingURL=button-presentation.js.map
+//# sourceMappingURL=button-presentation.js.map

package/components/button/button-presentation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button-presentation.ts"],"names":[],"mappings":";;AAEO,SAAS,UAAA,CACd,YAAY,EAAA,EACJ;AACR,EAAA,OAAO,UAAA;AAAA,IACL,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,cAAA,EAAgB;AAAA;AAClB,GACF;AACF","file":"button-presentation.js","sourcesContent":["import { classnames } from '../helpers/classnames';\n\nexport function buttonLink(\n  className = '',\n): string {\n  return classnames(\n    'button',\n    className,\n    {\n      'button--link': true,\n    },\n  );\n}\n"]}

package/components/button/button.css

@@ -83,25 +83,69 @@
 }
 
 .button:hover {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-hover);
 }
 
 .button:focus-visible {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
   outline:
     var(--button-focus-width)
     solid
     var(--button-focus-color);
   outline-offset: var(--button-focus-offset);
+
+  /* depth */
+
+  /* motion */
 }
 
 .button:active {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-active);
 }
 
 .button:disabled,
 .button--disabled {
+  /* color */
   background: var(--button-bg-disabled);
   color: var(--button-color-disabled);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-disabled);
   cursor: not-allowed;
 }
@@ -109,25 +153,66 @@
 /* Rank */
 
 .button--primary {
+  /* color */
   --button-bg: var(--color-primary-2);
   --button-color: var(--color-text-primary-2);
   --button-focus-color: var(--color-primary-2);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--link {
+  /* color */
   --button-bg: transparent;
   --button-color: var(--color-link);
   --button-focus-color: var(--color-link);
+
+  /* typography */
+
+  /* size */
+  height: auto;
+  min-height: 0;
+  padding: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--link:disabled,
 .button--link.button--disabled {
+  /* color */
   background: transparent;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* Density */
 
 .button--compact {
+  /* color */
+
+  /* typography */
+
+  /* size */
   /*
    * Compact presentation is intentionally left
    * token-driven but visually unfinished.
@@ -135,27 +220,66 @@
    * Add compact control dimensions when the
    * corresponding semantic tokens are available.
    */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* Mode */
 
 .button--toolbar {
+  /* color */
   --button-bg: transparent;
   --button-color: var(--color-text);
   --button-focus-color: var(--color-text);
 
   background: transparent;
+
+  /* typography */
+
+  /* size */
   padding-inline: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--toolbar:disabled,
 .button--toolbar.button--disabled {
+  /* color */
   background: transparent;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* State */
 
 .button--loading {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   /*
    * Loading behavior is already defined by the
    * component contract:
@@ -169,9 +293,31 @@
 /* Content */
 
 .button--icon-only {
+  /* color */
+
+  /* typography */
+
+  /* size */
   padding-inline: var(--button-padding-icon-only);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .button--toolbar.button--icon-only {
+  /* color */
+
+  /* typography */
+
+  /* size */
   padding-inline: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }

package/components/button/index.cjs

@@ -1,6 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var button = require('./button');
+var buttonPresentation = require('./button-presentation');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -8,6 +11,13 @@ var button__default = /*#__PURE__*/_interopDefault(button);
 
 
 
-module.exports = button__default.default;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return button__default.default; }
+});
+Object.defineProperty(exports, "buttonLink", {
+  enumerable: true,
+  get: function () { return buttonPresentation.buttonLink; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/button/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './button';
 export type { ButtonProps } from './button';
+export { buttonLink } from './button-presentation';

package/components/button/index.js

@@ -1,3 +1,4 @@
 export { default } from './button';
+export { buttonLink } from './button-presentation';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/checkbox/checkbox.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classnames = require('../helpers/classnames');
+require('./checkbox.css');
 
 const Checkbox = ({
   label,
@@ -16,6 +17,7 @@ const Checkbox = ({
       "checkbox--disabled": disabled
     }
   );
+  const hasLabel = label !== null && label !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: classes, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -26,7 +28,7 @@ const Checkbox = ({
         ...props
       }
     ),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox__label", children: label })
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox__label", children: label }) : null
   ] });
 };
 var checkbox_default = Checkbox;

package/components/checkbox/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,oBAAA,EAAsB;AAAA;AACxB,GACF;AAEA,EAAA,uBACEC,eAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,OAAA,EAChB,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,iBAAA;AAAA,QACV,IAAA,EAAK,UAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,KAAA,oBAASA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAmB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrD,CAAA;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"checkbox.cjs","sourcesContent":["import React from 'react';\n//import './checkbox.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'checkbox',\n    className,\n    {\n      'checkbox--disabled': disabled,\n    }\n  );\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"checkbox__input\"\n        type=\"checkbox\"\n        disabled={disabled}\n        {...props}\n      />\n      {label && <span className=\"checkbox__label\">{label}</span>}\n    </label>\n  );\n};\n\nexport default Checkbox;"]}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAUA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,oBAAA,EAAsB;AAAA;AACxB,GACF;AAEA,EAAA,MAAM,QAAA,GACJ,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,MAAA;AAE9B,EAAA,uBACEC,eAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,OAAA,EAChB,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,iBAAA;AAAA,QACV,IAAA,EAAK,UAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IAEC,2BACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EACb,iBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"checkbox.cjs","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\nimport './checkbox.css';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'checkbox',\n    className,\n    {\n      'checkbox--disabled': disabled,\n    },\n  );\n\n  const hasLabel =\n    label !== null && label !== undefined;\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"checkbox__input\"\n        type=\"checkbox\"\n        disabled={disabled}\n        {...props}\n      />\n\n      {hasLabel ? (\n        <span className=\"checkbox__label\">\n          {label}\n        </span>\n      ) : null}\n    </label>\n  );\n};\n\nexport default Checkbox;\n"]}

package/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 .checkbox {
   /* color */
-  --checkbox-label-color: var(--color-text);
+  --checkbox-label-color: inherit;
 
   color: var(--checkbox-label-color);
 
@@ -34,6 +34,7 @@
 
 .checkbox__input {
   /* color */
+  accent-color: var(--color-primary-2);
 
   /* typography */
 
@@ -71,10 +72,32 @@
 }
 
 .checkbox--disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--checkbox-opacity-disabled);
   cursor: not-allowed;
 }
 
 .checkbox__input:disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   cursor: not-allowed;
 }

package/components/checkbox/checkbox.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import './checkbox.css';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: React.ReactNode;
 }

package/components/checkbox/checkbox.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classnames } from '../helpers/classnames';
+import './checkbox.css';
 
 const Checkbox = ({
   label,
@@ -14,6 +15,7 @@ const Checkbox = ({
       "checkbox--disabled": disabled
     }
   );
+  const hasLabel = label !== null && label !== void 0;
   return /* @__PURE__ */ jsxs("label", { className: classes, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -24,7 +26,7 @@ const Checkbox = ({
         ...props
       }
     ),
-    label && /* @__PURE__ */ jsx("span", { className: "checkbox__label", children: label })
+    hasLabel ? /* @__PURE__ */ jsx("span", { className: "checkbox__label", children: label }) : null
   ] });
 };
 var checkbox_default = Checkbox;

package/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":";;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,oBAAA,EAAsB;AAAA;AACxB,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,OAAA,EAChB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,iBAAA;AAAA,QACV,IAAA,EAAK,UAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAmB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACrD,CAAA;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"checkbox.js","sourcesContent":["import React from 'react';\n//import './checkbox.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'checkbox',\n    className,\n    {\n      'checkbox--disabled': disabled,\n    }\n  );\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"checkbox__input\"\n        type=\"checkbox\"\n        disabled={disabled}\n        {...props}\n      />\n      {label && <span className=\"checkbox__label\">{label}</span>}\n    </label>\n  );\n};\n\nexport default Checkbox;"]}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;AAUA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,oBAAA,EAAsB;AAAA;AACxB,GACF;AAEA,EAAA,MAAM,QAAA,GACJ,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,MAAA;AAE9B,EAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,OAAA,EAChB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,iBAAA;AAAA,QACV,IAAA,EAAK,UAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IAEC,2BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EACb,iBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"checkbox.js","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\nimport './checkbox.css';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'checkbox',\n    className,\n    {\n      'checkbox--disabled': disabled,\n    },\n  );\n\n  const hasLabel =\n    label !== null && label !== undefined;\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"checkbox__input\"\n        type=\"checkbox\"\n        disabled={disabled}\n        {...props}\n      />\n\n      {hasLabel ? (\n        <span className=\"checkbox__label\">\n          {label}\n        </span>\n      ) : null}\n    </label>\n  );\n};\n\nexport default Checkbox;\n"]}

package/components/field/field.cjs

@@ -3,39 +3,59 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classnames = require('../helpers/classnames');
 
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
 const Field = ({
   label,
   hint,
   error,
+  action,
   required = false,
   disabled = false,
   htmlFor,
   className = "",
-  children
+  children,
+  ...props
 }) => {
+  const hasLabel = hasContent(label);
+  const hasError = hasContent(error);
+  const hasHint = hasContent(hint);
+  const hasAction = hasContent(action);
   const classes = classnames.classnames(
     "field",
     className,
     {
       "field--disabled": disabled,
-      "field--error": !!error
+      "field--error": hasError
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: [
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "field__label",
+            htmlFor,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "field__required", children: [
+                " ",
+                "*"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field__control", children }),
+        hasError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field__message field__message--error", children: error }) : hasHint ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field__message", children: hint }) : null,
+        hasAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field__action", children: action })
+      ]
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        className: "field__label",
-        htmlFor,
-        children: [
-          label,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "field__required", children: " *" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field__control", children }),
-    error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field__message field__message--error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field__message", children: hint }) : null
-  ] });
 };
 var field_default = Field;
 

package/components/field/field.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/field/field.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;AAeA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB,QAAA;AAAA,MACnB,cAAA,EAAgB,CAAC,CAAC;AAAA;AACpB,GACF;AAEA,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACb,QAAA,EAAA;AAAA,IAAA,KAAA,oBACCA,eAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,cAAA;AAAA,QACV,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UACA,QAAA,oBAAYC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAkB,QAAA,EAAA,IAAA,EAAE;AAAA;AAAA;AAAA,KACnD;AAAA,oBAGFA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EACH,CAAA;AAAA,IAEC,KAAA,mBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA,GACE,IAAA,mBACFA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,gBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"field.cjs","sourcesContent":["import React from 'react';\n//import './field.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FieldProps {\n  label?: React.ReactNode;\n  hint?: React.ReactNode;\n  error?: React.ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  htmlFor?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst Field: React.FC<FieldProps> = ({\n  label,\n  hint,\n  error,\n  required = false,\n  disabled = false,\n  htmlFor,\n  className = '',\n  children,\n}) => {\n  const classes = classnames(\n    'field',\n    className,\n    {\n      'field--disabled': disabled,\n      'field--error': !!error,\n    }\n  );\n\n  return (\n    <div className={classes}>\n      {label && (\n        <label\n          className=\"field__label\"\n          htmlFor={htmlFor}\n        >\n          {label}\n          {required && <span className=\"field__required\"> *</span>}\n        </label>\n      )}\n\n      <div className=\"field__control\">\n        {children}\n      </div>\n\n      {error ? (\n        <div className=\"field__message field__message--error\">\n          {error}\n        </div>\n      ) : hint ? (\n        <div className=\"field__message\">\n          {hint}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Field;"]}
+{"version":3,"sources":["../../../src/components/field/field.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;AAmBA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,QAAA,GAAW,WAAW,KAAK,CAAA;AACjC,EAAA,MAAM,QAAA,GAAW,WAAW,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,WAAW,IAAI,CAAA;AAC/B,EAAA,MAAM,SAAA,GAAY,WAAW,MAAM,CAAA;AAEnC,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB,QAAA;AAAA,MACnB,cAAA,EAAgB;AAAA;AAClB,GACF;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA,oBACCA,eAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,cAAA;AAAA,YACV,OAAA;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cAEA,QAAA,oBACCA,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EACb,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAI;AAAA,eAAA,EAEP;AAAA;AAAA;AAAA,SAEJ;AAAA,wBAGFC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EACH,CAAA;AAAA,QAEC,QAAA,mBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA,GACE,OAAA,mBACFA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,gBACH,CAAA,GACE,IAAA;AAAA,QAEH,SAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"field.cjs","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\n\nexport interface FieldProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  label?: React.ReactNode;\n  hint?: React.ReactNode;\n  error?: React.ReactNode;\n  action?: React.ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  htmlFor?: string;\n  children: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nconst Field: React.FC<FieldProps> = ({\n  label,\n  hint,\n  error,\n  action,\n  required = false,\n  disabled = false,\n  htmlFor,\n  className = '',\n  children,\n  ...props\n}) => {\n  const hasLabel = hasContent(label);\n  const hasError = hasContent(error);\n  const hasHint = hasContent(hint);\n  const hasAction = hasContent(action);\n\n  const classes = classnames(\n    'field',\n    className,\n    {\n      'field--disabled': disabled,\n      'field--error': hasError,\n    },\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {hasLabel && (\n        <label\n          className=\"field__label\"\n          htmlFor={htmlFor}\n        >\n          {label}\n\n          {required && (\n            <span className=\"field__required\">\n              {' '}\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <div className=\"field__control\">\n        {children}\n      </div>\n\n      {hasError ? (\n        <div className=\"field__message field__message--error\">\n          {error}\n        </div>\n      ) : hasHint ? (\n        <div className=\"field__message\">\n          {hint}\n        </div>\n      ) : null}\n\n      {hasAction && (\n        <div className=\"field__action\">\n          {action}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Field;\n"]}

package/components/field/field.css

@@ -108,6 +108,23 @@
   /* motion */
 }
 
+.field__action {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .field--disabled {
   opacity: var(--field-opacity-disabled);
 }

package/components/field/field.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-export interface FieldProps {
+export interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     label?: React.ReactNode;
     hint?: React.ReactNode;
     error?: React.ReactNode;
+    action?: React.ReactNode;
     required?: boolean;
     disabled?: boolean;
     htmlFor?: string;
-    className?: string;
     children: React.ReactNode;
 }
 declare const Field: React.FC<FieldProps>;

package/components/field/field.js

@@ -1,39 +1,59 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classnames } from '../helpers/classnames';
 
+function hasContent(value) {
+  return value !== null && value !== void 0;
+}
 const Field = ({
   label,
   hint,
   error,
+  action,
   required = false,
   disabled = false,
   htmlFor,
   className = "",
-  children
+  children,
+  ...props
 }) => {
+  const hasLabel = hasContent(label);
+  const hasError = hasContent(error);
+  const hasHint = hasContent(hint);
+  const hasAction = hasContent(action);
   const classes = classnames(
     "field",
     className,
     {
       "field--disabled": disabled,
-      "field--error": !!error
+      "field--error": hasError
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: [
+        hasLabel && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "field__label",
+            htmlFor,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxs("span", { className: "field__required", children: [
+                " ",
+                "*"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "field__control", children }),
+        hasError ? /* @__PURE__ */ jsx("div", { className: "field__message field__message--error", children: error }) : hasHint ? /* @__PURE__ */ jsx("div", { className: "field__message", children: hint }) : null,
+        hasAction && /* @__PURE__ */ jsx("div", { className: "field__action", children: action })
+      ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    label && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        className: "field__label",
-        htmlFor,
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "field__required", children: " *" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "field__control", children }),
-    error ? /* @__PURE__ */ jsx("div", { className: "field__message field__message--error", children: error }) : hint ? /* @__PURE__ */ jsx("div", { className: "field__message", children: hint }) : null
-  ] });
 };
 var field_default = Field;
 

package/components/field/field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":";;;AAeA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB,QAAA;AAAA,MACnB,cAAA,EAAgB,CAAC,CAAC;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACb,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,cAAA;AAAA,QACV,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UACA,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAkB,QAAA,EAAA,IAAA,EAAE;AAAA;AAAA;AAAA,KACnD;AAAA,oBAGF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EACH,CAAA;AAAA,IAEC,KAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA,GACE,IAAA,mBACF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,gBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"field.js","sourcesContent":["import React from 'react';\n//import './field.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FieldProps {\n  label?: React.ReactNode;\n  hint?: React.ReactNode;\n  error?: React.ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  htmlFor?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst Field: React.FC<FieldProps> = ({\n  label,\n  hint,\n  error,\n  required = false,\n  disabled = false,\n  htmlFor,\n  className = '',\n  children,\n}) => {\n  const classes = classnames(\n    'field',\n    className,\n    {\n      'field--disabled': disabled,\n      'field--error': !!error,\n    }\n  );\n\n  return (\n    <div className={classes}>\n      {label && (\n        <label\n          className=\"field__label\"\n          htmlFor={htmlFor}\n        >\n          {label}\n          {required && <span className=\"field__required\"> *</span>}\n        </label>\n      )}\n\n      <div className=\"field__control\">\n        {children}\n      </div>\n\n      {error ? (\n        <div className=\"field__message field__message--error\">\n          {error}\n        </div>\n      ) : hint ? (\n        <div className=\"field__message\">\n          {hint}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Field;"]}
+{"version":3,"sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":";;;AAmBA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,QAAA,GAAW,WAAW,KAAK,CAAA;AACjC,EAAA,MAAM,QAAA,GAAW,WAAW,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,WAAW,IAAI,CAAA;AAC/B,EAAA,MAAM,SAAA,GAAY,WAAW,MAAM,CAAA;AAEnC,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB,QAAA;AAAA,MACnB,cAAA,EAAgB;AAAA;AAClB,GACF;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA,oBACC,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,cAAA;AAAA,YACV,OAAA;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cAEA,QAAA,oBACC,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EACb,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAI;AAAA,eAAA,EAEP;AAAA;AAAA;AAAA,SAEJ;AAAA,wBAGF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EACH,CAAA;AAAA,QAEC,QAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA,GACE,OAAA,mBACF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,gBACH,CAAA,GACE,IAAA;AAAA,QAEH,SAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"field.js","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\n\nexport interface FieldProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  label?: React.ReactNode;\n  hint?: React.ReactNode;\n  error?: React.ReactNode;\n  action?: React.ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  htmlFor?: string;\n  children: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nconst Field: React.FC<FieldProps> = ({\n  label,\n  hint,\n  error,\n  action,\n  required = false,\n  disabled = false,\n  htmlFor,\n  className = '',\n  children,\n  ...props\n}) => {\n  const hasLabel = hasContent(label);\n  const hasError = hasContent(error);\n  const hasHint = hasContent(hint);\n  const hasAction = hasContent(action);\n\n  const classes = classnames(\n    'field',\n    className,\n    {\n      'field--disabled': disabled,\n      'field--error': hasError,\n    },\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {hasLabel && (\n        <label\n          className=\"field__label\"\n          htmlFor={htmlFor}\n        >\n          {label}\n\n          {required && (\n            <span className=\"field__required\">\n              {' '}\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <div className=\"field__control\">\n        {children}\n      </div>\n\n      {hasError ? (\n        <div className=\"field__message field__message--error\">\n          {error}\n        </div>\n      ) : hasHint ? (\n        <div className=\"field__message\">\n          {hint}\n        </div>\n      ) : null}\n\n      {hasAction && (\n        <div className=\"field__action\">\n          {action}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Field;\n"]}