jvetrau-ds 0.1.45 → 0.2.2

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"]}

package/components/flip-list/flip-list.cjs

@@ -90,6 +90,9 @@ const FlipList = ({
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
         const isOpen = resolvedOpenItemId === item.id;
+        const hasStatus = hasContent(
+          item.status
+        );
         const hasMeta = hasContent(
           item.meta
         );
@@ -118,8 +121,11 @@ const FlipList = ({
                   "aria-controls": contentId,
                   onClick: () => toggleItem(item.id),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__title", children: item.title }),
-                    hasMeta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__meta", children: item.meta })
+                    hasStatus && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__status", children: item.status }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flip-list__main", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__title", children: item.title }),
+                      hasMeta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__meta", children: item.meta })
+                    ] })
                   ]
                 }
               ),

package/components/flip-list/flip-list.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\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\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  status?: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\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\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasStatus = hasContent(\n            item.status,\n          );\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                {hasStatus && (\n                  <span className=\"flip-list__status\">\n                    {item.status}\n                  </span>\n                )}\n\n                <span className=\"flip-list__main\">\n                  <span className=\"flip-list__title\">\n                    {item.title}\n                  </span>\n\n                  {hasMeta && (\n                    <span className=\"flip-list__meta\">\n                      {item.meta}\n                    </span>\n                  )}\n                </span>\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}

package/components/flip-list/flip-list.css

@@ -133,9 +133,8 @@
 
   /* size */
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--flip-list-trigger-column-gap);
+  flex-direction: column;
+  align-items: stretch;
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -170,6 +169,53 @@
   /* motion */
 }
 
+.flip-list__status {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --flip-list-status-gap:
+    var(--margin-tag);
+
+  display: block;
+  align-self: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  margin:
+    0
+    0
+    var(--flip-list-status-gap)
+    0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--flip-list-trigger-column-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__title {
   /* color */
   color: inherit;

package/components/flip-list/flip-list.d.ts

@@ -3,6 +3,7 @@ import './flip-list.css';
 export interface FlipListItem {
     id: React.Key;
     title: React.ReactNode;
+    status?: React.ReactNode;
     meta?: React.ReactNode;
     content: React.ReactNode;
 }

package/components/flip-list/flip-list.js

@@ -84,6 +84,9 @@ const FlipList = ({
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
         const isOpen = resolvedOpenItemId === item.id;
+        const hasStatus = hasContent(
+          item.status
+        );
         const hasMeta = hasContent(
           item.meta
         );
@@ -112,8 +115,11 @@ const FlipList = ({
                   "aria-controls": contentId,
                   onClick: () => toggleItem(item.id),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "flip-list__title", children: item.title }),
-                    hasMeta && /* @__PURE__ */ jsx("span", { className: "flip-list__meta", children: item.meta })
+                    hasStatus && /* @__PURE__ */ jsx("span", { className: "flip-list__status", children: item.status }),
+                    /* @__PURE__ */ jsxs("span", { className: "flip-list__main", children: [
+                      /* @__PURE__ */ jsx("span", { className: "flip-list__title", children: item.title }),
+                      hasMeta && /* @__PURE__ */ jsx("span", { className: "flip-list__meta", children: item.meta })
+                    ] })
                   ]
                 }
               ),

package/components/flip-list/flip-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":"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","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\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\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                <span className=\"flip-list__title\">\n                  {item.title}\n                </span>\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}
+{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":"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","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  status?: React.ReactNode;\n  meta?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface FlipListProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  items: FlipListItem[];\n\n  /**\n   * Currently opened item in controlled mode.\n   *\n   * `null` means that all items are closed.\n   *\n   * When this prop is provided, FlipList does not\n   * own the opened-item state.\n   */\n  openId?: React.Key | null;\n\n  /**\n   * Item opened during the initial render\n   * in uncontrolled mode.\n   *\n   * Later changes to this prop do not control\n   * the component state.\n   */\n  defaultOpenId?: React.Key;\n\n  /**\n   * Called when the user requests a change\n   * of the opened item.\n   *\n   * Receives the item id when an item is opened,\n   * and `null` when the currently opened item\n   * is closed.\n   */\n  onOpenChange?: (\n    id: React.Key | null,\n  ) => void;\n\n  /**\n   * Scrolls the item that is open during\n   * the initial render into view once.\n   *\n   * In uncontrolled mode, the initial item comes\n   * from `defaultOpenId`.\n   *\n   * In controlled mode, the initial item comes\n   * from `openId`.\n   *\n   * Later state changes never trigger scrolling.\n   */\n  scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\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\nfunction normalizeOpenItemId(\n  items: FlipListItem[],\n  openId: OpenItemId | undefined,\n): OpenItemId {\n  if (\n    openId === null ||\n    openId === undefined\n  ) {\n    return null;\n  }\n\n  const hasMatchingItem = items.some(\n    (item) => item.id === openId,\n  );\n\n  return hasMatchingItem\n    ? openId\n    : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n  items,\n  openId,\n  defaultOpenId,\n  onOpenChange,\n  scrollToInitialOpen = false,\n  className = '',\n  ...props\n}) => {\n  const componentId = React.useId();\n\n  const isControlled =\n    openId !== undefined;\n\n  const initialOpenItemIdRef =\n    React.useRef<OpenItemId>(\n      normalizeOpenItemId(\n        items,\n        isControlled\n          ? openId\n          : defaultOpenId,\n      ),\n    );\n\n  const shouldScrollInitiallyRef =\n    React.useRef(scrollToInitialOpen);\n\n  const initialOpenItemRef =\n    React.useRef<HTMLDivElement | null>(\n      null,\n    );\n\n  const hasScrolledInitiallyRef =\n    React.useRef(false);\n\n  const [\n    uncontrolledOpenItemId,\n    setUncontrolledOpenItemId,\n  ] = React.useState<OpenItemId>(() =>\n    normalizeOpenItemId(\n      items,\n      defaultOpenId,\n    ),\n  );\n\n  const resolvedOpenItemId =\n    normalizeOpenItemId(\n      items,\n      isControlled\n        ? openId\n        : uncontrolledOpenItemId,\n    );\n\n  React.useEffect(() => {\n    if (\n      hasScrolledInitiallyRef.current ||\n      !shouldScrollInitiallyRef.current ||\n      initialOpenItemIdRef.current === null ||\n      !initialOpenItemRef.current\n    ) {\n      return;\n    }\n\n    hasScrolledInitiallyRef.current = true;\n\n    initialOpenItemRef.current.scrollIntoView({\n      behavior: 'auto',\n      block: 'start',\n    });\n  }, []);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'flip-list',\n    className,\n    {},\n  );\n\n  const toggleItem = (\n    itemId: React.Key,\n  ) => {\n    const nextOpenItemId =\n      resolvedOpenItemId === itemId\n        ? null\n        : itemId;\n\n    if (!isControlled) {\n      setUncontrolledOpenItemId(\n        nextOpenItemId,\n      );\n    }\n\n    onOpenChange?.(nextOpenItemId);\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div className=\"flip-list__items\">\n        {items.map((item, itemIndex) => {\n          const isOpen =\n            resolvedOpenItemId === item.id;\n\n          const hasStatus = hasContent(\n            item.status,\n          );\n\n          const hasMeta = hasContent(\n            item.meta,\n          );\n\n          const triggerId =\n            `${componentId}-trigger-${itemIndex}`;\n\n          const contentId =\n            `${componentId}-content-${itemIndex}`;\n\n          const itemClasses = classnames(\n            'flip-list__item',\n            '',\n            {\n              'flip-list__item--open':\n                isOpen,\n            },\n          );\n\n          return (\n            <div\n              key={item.id}\n              ref={\n                item.id ===\n                initialOpenItemIdRef.current\n                  ? initialOpenItemRef\n                  : undefined\n              }\n              className={itemClasses}\n            >\n              <button\n                className=\"flip-list__trigger\"\n                id={triggerId}\n                type=\"button\"\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={() =>\n                  toggleItem(item.id)\n                }\n              >\n                {hasStatus && (\n                  <span className=\"flip-list__status\">\n                    {item.status}\n                  </span>\n                )}\n\n                <span className=\"flip-list__main\">\n                  <span className=\"flip-list__title\">\n                    {item.title}\n                  </span>\n\n                  {hasMeta && (\n                    <span className=\"flip-list__meta\">\n                      {item.meta}\n                    </span>\n                  )}\n                </span>\n              </button>\n\n              <div\n                className=\"flip-list__content\"\n                id={contentId}\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n              >\n                {item.content}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default FlipList;\n"]}

package/components/index.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var button = require('./button/button');
-var buttonIcon = require('./button-icon/button-icon');
 var input = require('./input/input');
 var textarea = require('./textarea/textarea');
 var select = require('./select/select');
@@ -33,7 +32,6 @@ var avatarUpload = require('./avatar-upload/avatar-upload');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var button__default = /*#__PURE__*/_interopDefault(button);
-var buttonIcon__default = /*#__PURE__*/_interopDefault(buttonIcon);
 var input__default = /*#__PURE__*/_interopDefault(input);
 var textarea__default = /*#__PURE__*/_interopDefault(textarea);
 var select__default = /*#__PURE__*/_interopDefault(select);
@@ -67,10 +65,6 @@ Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () { return button__default.default; }
 });
-Object.defineProperty(exports, "ButtonIcon", {
-  enumerable: true,
-  get: function () { return buttonIcon__default.default; }
-});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function () { return input__default.default; }

package/components/index.d.ts

@@ -1,7 +1,5 @@
 export { default as Button } from './button/button';
 export type { ButtonProps } from './button/button';
-export { default as ButtonIcon } from './button-icon/button-icon';
-export type { ButtonIconProps } from './button-icon/button-icon';
 export { default as Input } from './input/input';
 export type { InputProps } from './input/input';
 export { default as Textarea } from './textarea/textarea';

package/components/index.js

@@ -1,5 +1,4 @@
 export { default as Button } from './button/button';
-export { default as ButtonIcon } from './button-icon/button-icon';
 export { default as Input } from './input/input';
 export { default as Textarea } from './textarea/textarea';
 export { default as Select } from './select/select';

package/components/radio/radio.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classnames = require('../helpers/classnames');
+require('./radio.css');
 
 const Radio = ({
   label,
@@ -16,6 +17,7 @@ const Radio = ({
       "radio--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 Radio = ({
         ...props
       }
     ),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "radio__label", children: label })
+    hasLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "radio__label", children: label }) : null
   ] });
 };
 var radio_default = Radio;

package/components/radio/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/radio/radio.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,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,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB;AAAA;AACrB,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,cAAA;AAAA,QACV,IAAA,EAAK,OAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,KAAA,oBAASA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAClD,CAAA;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"radio.cjs","sourcesContent":["import React from 'react';\n//import './radio.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Radio: React.FC<RadioProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'radio',\n    className,\n    {\n      'radio--disabled': disabled,\n    }\n  );\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"radio__input\"\n        type=\"radio\"\n        disabled={disabled}\n        {...props}\n      />\n      {label && <span className=\"radio__label\">{label}</span>}\n    </label>\n  );\n};\n\nexport default Radio;"]}
+{"version":3,"sources":["../../../src/components/radio/radio.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAUA,MAAM,QAA8B,CAAC;AAAA,EACnC,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,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB;AAAA;AACrB,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,cAAA;AAAA,QACV,IAAA,EAAK,OAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IAEC,2BACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACb,iBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"radio.cjs","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\nimport './radio.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Radio: React.FC<RadioProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'radio',\n    className,\n    {\n      'radio--disabled': disabled,\n    },\n  );\n\n  const hasLabel =\n    label !== null && label !== undefined;\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"radio__input\"\n        type=\"radio\"\n        disabled={disabled}\n        {...props}\n      />\n\n      {hasLabel ? (\n        <span className=\"radio__label\">\n          {label}\n        </span>\n      ) : null}\n    </label>\n  );\n};\n\nexport default Radio;\n"]}

package/components/radio/radio.css

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

package/components/radio/radio.d.ts

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

package/components/radio/radio.js

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

package/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":";;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,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,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB;AAAA;AACrB,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,cAAA;AAAA,QACV,IAAA,EAAK,OAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EAClD,CAAA;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"radio.js","sourcesContent":["import React from 'react';\n//import './radio.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Radio: React.FC<RadioProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'radio',\n    className,\n    {\n      'radio--disabled': disabled,\n    }\n  );\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"radio__input\"\n        type=\"radio\"\n        disabled={disabled}\n        {...props}\n      />\n      {label && <span className=\"radio__label\">{label}</span>}\n    </label>\n  );\n};\n\nexport default Radio;"]}
+{"version":3,"sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":";;;;AAUA,MAAM,QAA8B,CAAC;AAAA,EACnC,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,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAmB;AAAA;AACrB,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,cAAA;AAAA,QACV,IAAA,EAAK,OAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IAEC,2BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACb,iBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"radio.js","sourcesContent":["import React from 'react';\n\nimport { classnames } from '../helpers/classnames';\nimport './radio.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Radio: React.FC<RadioProps> = ({\n  label,\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'radio',\n    className,\n    {\n      'radio--disabled': disabled,\n    },\n  );\n\n  const hasLabel =\n    label !== null && label !== undefined;\n\n  return (\n    <label className={classes}>\n      <input\n        className=\"radio__input\"\n        type=\"radio\"\n        disabled={disabled}\n        {...props}\n      />\n\n      {hasLabel ? (\n        <span className=\"radio__label\">\n          {label}\n        </span>\n      ) : null}\n    </label>\n  );\n};\n\nexport default Radio;\n"]}