jvetrau-ds 0.2.7 → 0.2.9

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

@@ -3,12 +3,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('./flip-list.css');
+var Icon = require('../../icons/icon');
 var classnames = require('../helpers/classnames');
 var Tag = require('../tag');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var Icon__default = /*#__PURE__*/_interopDefault(Icon);
 var Tag__default = /*#__PURE__*/_interopDefault(Tag);
 
 function hasContent(value) {
@@ -95,6 +97,7 @@ const FlipList = ({
         const hasStatus = hasContent(
           item.status
         );
+        const statusIcon = item.statusIcon;
         const hasMeta = hasContent(
           item.meta
         );
@@ -107,6 +110,16 @@ const FlipList = ({
             "flip-list__item--open": isOpen
           }
         );
+        const resolvedStatusIcon = statusIcon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon__default.default,
+          {
+            name: statusIcon,
+            size: "base",
+            className: "flip-list__status-icon",
+            "aria-hidden": true,
+            focusable: false
+          }
+        ) : null;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -114,21 +127,22 @@ const FlipList = ({
             className: itemClasses,
             children: [
               hasStatus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flip-list__status", children: /* @__PURE__ */ jsxRuntime.jsx(Tag__default.default, { children: item.status }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  className: "flip-list__trigger",
-                  id: triggerId,
-                  type: "button",
-                  "aria-expanded": isOpen,
-                  "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 })
-                  ]
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flip-list__heading", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    className: "flip-list__trigger",
+                    id: triggerId,
+                    type: "button",
+                    "aria-expanded": isOpen,
+                    "aria-controls": contentId,
+                    onClick: () => toggleItem(item.id),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__title", children: item.title })
+                  }
+                ),
+                resolvedStatusIcon,
+                hasMeta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flip-list__meta", children: item.meta })
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {

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","Tag"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\nimport Tag from '../tag';\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              {hasStatus && (\n                <div className=\"flip-list__status\">\n                  <Tag>\n                    {item.status}\n                  </Tag>\n                </div>\n              )}\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","Icon","jsxs","Tag"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport Icon from '../../icons/icon';\nimport type { IconName } from '../../icons/types';\nimport { classnames } from '../helpers/classnames';\nimport Tag from '../tag';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  status?: React.ReactNode;\n  statusIcon?: IconName;\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 statusIcon =\n            item.statusIcon;\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          const resolvedStatusIcon =\n            statusIcon !== undefined ? (\n              <Icon\n                name={statusIcon}\n                size=\"base\"\n                className=\"flip-list__status-icon\"\n                aria-hidden\n                focusable={false}\n              />\n            ) : null;\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              {hasStatus && (\n                <div className=\"flip-list__status\">\n                  <Tag>\n                    {item.status}\n                  </Tag>\n                </div>\n              )}\n\n              <div className=\"flip-list__heading\">\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                </button>\n\n                {resolvedStatusIcon}\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </div>\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

@@ -48,7 +48,7 @@
   --flip-list-open-content-gap:
     var(--font-h2-margin);
   --flip-list-trigger-column-gap:
-    var(--margin-item);
+    var(--margin-icon);
   --flip-list-scroll-margin-block-start:
     0px;
 
@@ -121,74 +121,92 @@
   /* motion */
 }
 
-.flip-list__trigger {
+.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__heading {
   /* color */
-  background: transparent;
-  color: var(--flip-list-trigger-color);
 
   /* typography */
-  font: inherit;
-  text-align: left;
 
   /* size */
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--flip-list-trigger-column-gap);
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  padding: 0;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.flip-list__trigger:focus-visible {
+.flip-list__trigger {
   /* color */
+  background: transparent;
+  color: var(--flip-list-trigger-color);
 
   /* typography */
+  font: inherit;
+  text-align: left;
 
   /* size */
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
 
   /* border */
-  outline:
-    var(--size-border-width-focus)
-    solid
-    currentColor;
-  outline-offset:
-    var(--size-border-offset-focus);
+  border: 0;
 
   /* depth */
 
   /* motion */
+  cursor: pointer;
 }
 
-.flip-list__status {
+.flip-list__trigger:focus-visible {
   /* 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 */
+  outline:
+    var(--size-border-width-focus)
+    solid
+    currentColor;
+  outline-offset:
+    var(--size-border-offset-focus);
 
   /* depth */
 
@@ -217,7 +235,6 @@
   text-underline-offset: from-font;
 
   /* size */
-  flex: 1 1 auto;
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
@@ -245,6 +262,21 @@
   /* motion */
 }
 
+.flip-list__status-icon {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 0 0 auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__meta {
   /* color */
   color: var(--flip-list-meta-color);
@@ -266,6 +298,7 @@
   flex: 0 0 auto;
   min-width: 0;
   max-width: 100%;
+  margin-left: auto;
 
   /* border */
 

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import './flip-list.css';
+import type { IconName } from '../../icons/types';
 export interface FlipListItem {
     id: React.Key;
     title: React.ReactNode;
     status?: React.ReactNode;
+    statusIcon?: IconName;
     meta?: React.ReactNode;
     content: React.ReactNode;
 }

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import './flip-list.css';
+import Icon from '../../icons/icon';
 import { classnames } from '../helpers/classnames';
 import Tag from '../tag';
 
@@ -88,6 +89,7 @@ const FlipList = ({
         const hasStatus = hasContent(
           item.status
         );
+        const statusIcon = item.statusIcon;
         const hasMeta = hasContent(
           item.meta
         );
@@ -100,6 +102,16 @@ const FlipList = ({
             "flip-list__item--open": isOpen
           }
         );
+        const resolvedStatusIcon = statusIcon !== void 0 ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: statusIcon,
+            size: "base",
+            className: "flip-list__status-icon",
+            "aria-hidden": true,
+            focusable: false
+          }
+        ) : null;
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -107,21 +119,22 @@ const FlipList = ({
             className: itemClasses,
             children: [
               hasStatus && /* @__PURE__ */ jsx("div", { className: "flip-list__status", children: /* @__PURE__ */ jsx(Tag, { children: item.status }) }),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  className: "flip-list__trigger",
-                  id: triggerId,
-                  type: "button",
-                  "aria-expanded": isOpen,
-                  "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 })
-                  ]
-                }
-              ),
+              /* @__PURE__ */ jsxs("div", { className: "flip-list__heading", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "flip-list__trigger",
+                    id: triggerId,
+                    type: "button",
+                    "aria-expanded": isOpen,
+                    "aria-controls": contentId,
+                    onClick: () => toggleItem(item.id),
+                    children: /* @__PURE__ */ jsx("span", { className: "flip-list__title", children: item.title })
+                  }
+                ),
+                resolvedStatusIcon,
+                hasMeta && /* @__PURE__ */ jsx("span", { className: "flip-list__meta", children: item.meta })
+              ] }),
               /* @__PURE__ */ jsx(
                 "div",
                 {

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';\nimport Tag from '../tag';\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              {hasStatus && (\n                <div className=\"flip-list__status\">\n                  <Tag>\n                    {item.status}\n                  </Tag>\n                </div>\n              )}\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 Icon from '../../icons/icon';\nimport type { IconName } from '../../icons/types';\nimport { classnames } from '../helpers/classnames';\nimport Tag from '../tag';\n\nexport interface FlipListItem {\n  id: React.Key;\n  title: React.ReactNode;\n  status?: React.ReactNode;\n  statusIcon?: IconName;\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 statusIcon =\n            item.statusIcon;\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          const resolvedStatusIcon =\n            statusIcon !== undefined ? (\n              <Icon\n                name={statusIcon}\n                size=\"base\"\n                className=\"flip-list__status-icon\"\n                aria-hidden\n                focusable={false}\n              />\n            ) : null;\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              {hasStatus && (\n                <div className=\"flip-list__status\">\n                  <Tag>\n                    {item.status}\n                  </Tag>\n                </div>\n              )}\n\n              <div className=\"flip-list__heading\">\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                </button>\n\n                {resolvedStatusIcon}\n\n                {hasMeta && (\n                  <span className=\"flip-list__meta\">\n                    {item.meta}\n                  </span>\n                )}\n              </div>\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,8 +1,8 @@
 'use strict';
 
 var button = require('./button');
-var input = require('./input/input');
-var textarea = require('./textarea/textarea');
+var input = require('./input');
+var textarea = require('./textarea');
 var select = require('./select/select');
 var dropdown = require('./dropdown/dropdown');
 var checkbox = require('./checkbox/checkbox');

package/components/index.d.ts

@@ -1,10 +1,10 @@
 export { default as Button } from './button';
 export { buttonLink, } from './button';
 export type { ButtonProps, } from './button';
-export { default as Input } from './input/input';
-export type { InputProps } from './input/input';
-export { default as Textarea } from './textarea/textarea';
-export type { TextareaProps } from './textarea/textarea';
+export { default as Input } from './input';
+export type { InputProps } from './input';
+export { default as Textarea } from './textarea';
+export type { TextareaProps } from './textarea';
 export { default as Select } from './select/select';
 export type { SelectProps } from './select/select';
 export { default as Dropdown } from './dropdown/dropdown';

package/components/index.js

@@ -1,6 +1,6 @@
 export { default as Button, buttonLink } from './button';
-export { default as Input } from './input/input';
-export { default as Textarea } from './textarea/textarea';
+export { default as Input } from './input';
+export { default as Textarea } from './textarea';
 export { default as Select } from './select/select';
 export { default as Dropdown } from './dropdown/dropdown';
 export { default as Checkbox } from './checkbox/checkbox';

package/components/input/input.cjs

@@ -5,14 +5,22 @@ var classnames = require('../helpers/classnames');
 
 const Input = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   ...props
 }) => {
-  const classes = classnames.classnames("input", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const classes = classnames.classnames(
+    "input",
+    className,
+    {
+      "input--error": state === "error",
+      "input--success": state === "success",
+      "input--width-short": width === "short",
+      "input--width-default": width === "default",
+      "input--width-max": width === "max"
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {

package/components/input/input.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GACpB,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.cjs","sourcesContent":["import React from 'react';\n//import './input.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    error: state === 'error',\n    success: state === 'success',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;"]}
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AAcA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,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,gBACE,KAAA,KAAU,OAAA;AAAA,MACZ,kBACE,KAAA,KAAU,SAAA;AAAA,MACZ,sBACE,KAAA,KAAU,OAAA;AAAA,MACZ,wBACE,KAAA,KAAU,SAAA;AAAA,MACZ,oBACE,KAAA,KAAU;AAAA;AACd,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.cjs","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype InputWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: InputWidth;\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'input',\n    className,\n    {\n      'input--error':\n        state === 'error',\n      'input--success':\n        state === 'success',\n      'input--width-short':\n        width === 'short',\n      'input--width-default':\n        width === 'default',\n      'input--width-max':\n        width === 'max',\n    },\n  );\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n"]}

package/components/input/input.css

@@ -25,6 +25,7 @@
   --input-height: var(--size-control-height);
   --input-padding-x: var(--padding-control-horz);
 
+  box-sizing: border-box;
   height: var(--input-height);
   padding-inline: var(--input-padding-x);
 
@@ -53,6 +54,21 @@
     background-color var(--input-transition-duration) ease;
 }
 
+.input--width-short {
+  /* size */
+  width: auto;
+}
+
+.input--width-default {
+  /* size */
+  width: 400px;
+}
+
+.input--width-max {
+  /* size */
+  width: 100%;
+}
+
 .input::placeholder {
   color: var(--input-placeholder);
 }

package/components/input/input.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+type InputWidth = 'short' | 'default' | 'max';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     state?: 'default' | 'error' | 'success';
+    width?: InputWidth;
 }
 declare const Input: React.FC<InputProps>;
 export default Input;

package/components/input/input.js

@@ -3,14 +3,22 @@ import { classnames } from '../helpers/classnames';
 
 const Input = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   ...props
 }) => {
-  const classes = classnames("input", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const classes = classnames(
+    "input",
+    className,
+    {
+      "input--error": state === "error",
+      "input--success": state === "success",
+      "input--width-short": width === "short",
+      "input--width-default": width === "default",
+      "input--width-max": width === "max"
+    }
+  );
   return /* @__PURE__ */ jsx(
     "input",
     {

package/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GACpB,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.js","sourcesContent":["import React from 'react';\n//import './input.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    error: state === 'error',\n    success: state === 'success',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;"]}
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";;;AAcA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,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,gBACE,KAAA,KAAU,OAAA;AAAA,MACZ,kBACE,KAAA,KAAU,SAAA;AAAA,MACZ,sBACE,KAAA,KAAU,OAAA;AAAA,MACZ,wBACE,KAAA,KAAU,SAAA;AAAA,MACZ,oBACE,KAAA,KAAU;AAAA;AACd,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.js","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype InputWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: InputWidth;\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames(\n    'input',\n    className,\n    {\n      'input--error':\n        state === 'error',\n      'input--success':\n        state === 'success',\n      'input--width-short':\n        width === 'short',\n      'input--width-default':\n        width === 'default',\n      'input--width-max':\n        width === 'max',\n    },\n  );\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n"]}

package/components/select/select.cjs

@@ -5,15 +5,23 @@ var classnames = require('../helpers/classnames');
 
 const Select = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   children,
   ...props
 }) => {
-  const classes = classnames.classnames("select", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const classes = classnames.classnames(
+    "select",
+    className,
+    {
+      "select--error": state === "error",
+      "select--success": state === "success",
+      "select--width-short": width === "short",
+      "select--width-default": width === "default",
+      "select--width-max": width === "max"
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(
     "select",
     {

package/components/select/select.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAAA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.cjs","sourcesContent":["import React from 'react';\n//import './select.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames('select', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;"]}
+{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AAcA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBACE,KAAA,KAAU,OAAA;AAAA,MACZ,mBACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,OAAA;AAAA,MACZ,yBACE,KAAA,KAAU,SAAA;AAAA,MACZ,qBACE,KAAA,KAAU;AAAA;AACd,GACF;AAEA,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAAA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.cjs","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype SelectWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: SelectWidth;\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'select',\n    className,\n    {\n      'select--error':\n        state === 'error',\n      'select--success':\n        state === 'success',\n      'select--width-short':\n        width === 'short',\n      'select--width-default':\n        width === 'default',\n      'select--width-max':\n        width === 'max',\n    },\n  );\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;\n"]}

package/components/select/select.css

@@ -30,7 +30,7 @@
 
   position: relative;
   display: inline-block;
-  width: 100%;
+  box-sizing: border-box;
 
   /* border */
   --select-border-width: var(--size-border-width-base);
@@ -51,6 +51,21 @@
   --select-transition-duration: 0.2s;
 }
 
+.select--width-short {
+  /* size */
+  width: fit-content;
+}
+
+.select--width-default {
+  /* size */
+  width: 400px;
+}
+
+.select--width-max {
+  /* size */
+  width: 100%;
+}
+
 .select__field {
   /* color */
   background: var(--select-bg);
@@ -61,6 +76,7 @@
   letter-spacing: inherit;
 
   /* size */
+  box-sizing: border-box;
   width: 100%;
   height: var(--select-height);
   padding-left: var(--select-padding-x);

package/components/select/select.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+type SelectWidth = 'short' | 'default' | 'max';
 export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     state?: 'default' | 'error' | 'success';
+    width?: SelectWidth;
 }
 declare const Select: React.FC<SelectProps>;
 export default Select;

package/components/select/select.js

@@ -3,15 +3,23 @@ import { classnames } from '../helpers/classnames';
 
 const Select = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   children,
   ...props
 }) => {
-  const classes = classnames("select", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const classes = classnames(
+    "select",
+    className,
+    {
+      "select--error": state === "error",
+      "select--success": state === "success",
+      "select--width-short": width === "short",
+      "select--width-default": width === "default",
+      "select--width-max": width === "max"
+    }
+  );
   return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
     "select",
     {

package/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":";;;AASA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,QAAA,EAAU,SAAA,EAAW;AAAA,IAC9C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.js","sourcesContent":["import React from 'react';\n//import './select.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames('select', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;"]}
+{"version":3,"sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":";;;AAcA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,iBACE,KAAA,KAAU,OAAA;AAAA,MACZ,mBACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,OAAA;AAAA,MACZ,yBACE,KAAA,KAAU,SAAA;AAAA,MACZ,qBACE,KAAA,KAAU;AAAA;AACd,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,eAAA;AAAA,MACV,QAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"select.js","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype SelectWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface SelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: SelectWidth;\n}\n\nconst Select: React.FC<SelectProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'select',\n    className,\n    {\n      'select--error':\n        state === 'error',\n      'select--success':\n        state === 'success',\n      'select--width-short':\n        width === 'short',\n      'select--width-default':\n        width === 'default',\n      'select--width-max':\n        width === 'max',\n    },\n  );\n\n  return (\n    <div className={classes}>\n      <select\n        className=\"select__field\"\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </select>\n    </div>\n  );\n};\n\nexport default Select;\n"]}

package/components/textarea/textarea.cjs

@@ -1,23 +1,87 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var classnames = require('../helpers/classnames');
 
+function parsePixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
 const Textarea = ({
   state = "default",
+  width = "default",
+  autoGrow = false,
   className = "",
   disabled = false,
+  onInput,
   ...props
 }) => {
-  const classes = classnames.classnames("textarea", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const textareaRef = react.useRef(null);
+  const resizeToContent = react.useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!autoGrow || !textarea) {
+      return;
+    }
+    const computedStyle = window.getComputedStyle(textarea);
+    const lineHeight = parsePixelValue(
+      computedStyle.lineHeight
+    );
+    const borderHeight = parsePixelValue(
+      computedStyle.borderTopWidth
+    ) + parsePixelValue(
+      computedStyle.borderBottomWidth
+    );
+    const minHeight = parsePixelValue(
+      computedStyle.minHeight
+    );
+    const previousMinHeight = textarea.style.minHeight;
+    textarea.style.minHeight = "0px";
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      "0px"
+    );
+    const contentHeight = textarea.scrollHeight;
+    textarea.style.minHeight = previousMinHeight;
+    const nextHeight = Math.max(
+      contentHeight + lineHeight + borderHeight,
+      minHeight
+    );
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      `${nextHeight}px`
+    );
+  }, [autoGrow]);
+  react.useLayoutEffect(() => {
+    resizeToContent();
+  }, [
+    resizeToContent,
+    props.value,
+    width
+  ]);
+  const handleInput = (event) => {
+    resizeToContent();
+    onInput?.(event);
+  };
+  const classes = classnames.classnames(
+    "textarea",
+    className,
+    {
+      "textarea--error": state === "error",
+      "textarea--success": state === "success",
+      "textarea--width-short": width === "short",
+      "textarea--width-default": width === "default",
+      "textarea--width-max": width === "max",
+      "textarea--auto-grow": autoGrow
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
+      ref: textareaRef,
       className: classes,
       disabled,
+      onInput: handleInput,
       ...props
     }
   );

package/components/textarea/textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,UAAA,EAAY,SAAA,EAAW;AAAA,IAChD,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACEC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.cjs","sourcesContent":["import React from 'react';\n// import './textarea.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('textarea', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <textarea\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;"]}
+{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":["useRef","useCallback","useLayoutEffect","classnames","jsx"],"mappings":";;;;;;AAmBA,SAAS,gBAAgB,KAAA,EAAe;AACtC,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAEtC,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,GACzB,MAAA,GACA,CAAA;AACN;AAEA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GACJA,aAA4B,IAAI,CAAA;AAElC,EAAA,MAAM,eAAA,GACJC,kBAAY,MAAM;AAChB,IAAA,MAAM,WACJ,WAAA,CAAY,OAAA;AAEd,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,QAAA,EAAU;AAC1B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GACJ,MAAA,CAAO,gBAAA,CAAiB,QAAQ,CAAA;AAElC,IAAA,MAAM,UAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,YAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB,GACA,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,SAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,iBAAA,GACJ,SAAS,KAAA,CAAM,SAAA;AAEjB,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,KAAA;AAEF,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,gBACJ,QAAA,CAAS,YAAA;AAEX,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,iBAAA;AAEF,IAAA,MAAM,aAAa,IAAA,CAAK,GAAA;AAAA,MACtB,gBACE,UAAA,GACA,YAAA;AAAA,MACF;AAAA,KACF;AAEA,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA,GAAG,UAAU,CAAA,EAAA;AAAA,KACf;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEf,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAA,eAAA,EAAgB;AAAA,EAClB,CAAA,EAAG;AAAA,IACD,eAAA;AAAA,IACA,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KACG;AACH,IAAA,eAAA,EAAgB;AAChB,IAAA,OAAA,GAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,KAAA,KAAU,OAAA;AAAA,MACZ,qBACE,KAAA,KAAU,SAAA;AAAA,MACZ,yBACE,KAAA,KAAU,OAAA;AAAA,MACZ,2BACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,KAAA;AAAA,MACZ,qBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.cjs","sourcesContent":["import React, {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype TextareaWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: TextareaWidth;\n  autoGrow?: boolean;\n}\n\nfunction parsePixelValue(value: string) {\n  const parsed = Number.parseFloat(value);\n\n  return Number.isFinite(parsed)\n    ? parsed\n    : 0;\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  width = 'default',\n  autoGrow = false,\n  className = '',\n  disabled = false,\n  onInput,\n  ...props\n}) => {\n  const textareaRef =\n    useRef<HTMLTextAreaElement>(null);\n\n  const resizeToContent =\n    useCallback(() => {\n      const textarea =\n        textareaRef.current;\n\n      if (!autoGrow || !textarea) {\n        return;\n      }\n\n      const computedStyle =\n        window.getComputedStyle(textarea);\n\n      const lineHeight =\n        parsePixelValue(\n          computedStyle.lineHeight,\n        );\n\n      const borderHeight =\n        parsePixelValue(\n          computedStyle.borderTopWidth,\n        ) +\n        parsePixelValue(\n          computedStyle.borderBottomWidth,\n        );\n\n      const minHeight =\n        parsePixelValue(\n          computedStyle.minHeight,\n        );\n\n      const previousMinHeight =\n        textarea.style.minHeight;\n\n      textarea.style.minHeight =\n        '0px';\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        '0px',\n      );\n\n      const contentHeight =\n        textarea.scrollHeight;\n\n      textarea.style.minHeight =\n        previousMinHeight;\n\n      const nextHeight = Math.max(\n        contentHeight +\n          lineHeight +\n          borderHeight,\n        minHeight,\n      );\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        `${nextHeight}px`,\n      );\n    }, [autoGrow]);\n\n  useLayoutEffect(() => {\n    resizeToContent();\n  }, [\n    resizeToContent,\n    props.value,\n    width,\n  ]);\n\n  const handleInput = (\n    event: React.InputEvent<HTMLTextAreaElement>,\n  ) => {\n    resizeToContent();\n    onInput?.(event);\n  };\n\n  const classes = classnames(\n    'textarea',\n    className,\n    {\n      'textarea--error':\n        state === 'error',\n      'textarea--success':\n        state === 'success',\n      'textarea--width-short':\n        width === 'short',\n      'textarea--width-default':\n        width === 'default',\n      'textarea--width-max':\n        width === 'max',\n      'textarea--auto-grow':\n        autoGrow,\n    },\n  );\n\n  return (\n    <textarea\n      ref={textareaRef}\n      className={classes}\n      disabled={disabled}\n      onInput={handleInput}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;\n"]}

package/components/textarea/textarea.css

@@ -26,6 +26,7 @@
   --textarea-padding-x: var(--padding-control-horz);
   --textarea-padding-y: var(--padding-control-horz);
 
+  box-sizing: border-box;
   min-height: var(--textarea-min-height);
   padding: var(--textarea-padding-y) var(--textarea-padding-x);
 
@@ -55,6 +56,30 @@
     background-color var(--textarea-transition-duration) ease;
 }
 
+.textarea--width-short {
+  /* size */
+  width: auto;
+}
+
+.textarea--width-default {
+  /* size */
+  width: 400px;
+}
+
+.textarea--width-max {
+  /* size */
+  width: 100%;
+}
+
+.textarea--auto-grow {
+  /* size */
+  height: var(--textarea-auto-height);
+
+  /* motion */
+  overflow-y: hidden;
+  resize: none;
+}
+
 .textarea::placeholder {
   color: var(--textarea-placeholder);
 }

package/components/textarea/textarea.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
+type TextareaWidth = 'short' | 'default' | 'max';
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     state?: 'default' | 'error' | 'success';
+    width?: TextareaWidth;
+    autoGrow?: boolean;
 }
 declare const Textarea: React.FC<TextareaProps>;
 export default Textarea;

package/components/textarea/textarea.js

@@ -1,21 +1,85 @@
 import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useLayoutEffect } from 'react';
 import { classnames } from '../helpers/classnames';
 
+function parsePixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
 const Textarea = ({
   state = "default",
+  width = "default",
+  autoGrow = false,
   className = "",
   disabled = false,
+  onInput,
   ...props
 }) => {
-  const classes = classnames("textarea", className, {
-    error: state === "error",
-    success: state === "success"
-  });
+  const textareaRef = useRef(null);
+  const resizeToContent = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!autoGrow || !textarea) {
+      return;
+    }
+    const computedStyle = window.getComputedStyle(textarea);
+    const lineHeight = parsePixelValue(
+      computedStyle.lineHeight
+    );
+    const borderHeight = parsePixelValue(
+      computedStyle.borderTopWidth
+    ) + parsePixelValue(
+      computedStyle.borderBottomWidth
+    );
+    const minHeight = parsePixelValue(
+      computedStyle.minHeight
+    );
+    const previousMinHeight = textarea.style.minHeight;
+    textarea.style.minHeight = "0px";
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      "0px"
+    );
+    const contentHeight = textarea.scrollHeight;
+    textarea.style.minHeight = previousMinHeight;
+    const nextHeight = Math.max(
+      contentHeight + lineHeight + borderHeight,
+      minHeight
+    );
+    textarea.style.setProperty(
+      "--textarea-auto-height",
+      `${nextHeight}px`
+    );
+  }, [autoGrow]);
+  useLayoutEffect(() => {
+    resizeToContent();
+  }, [
+    resizeToContent,
+    props.value,
+    width
+  ]);
+  const handleInput = (event) => {
+    resizeToContent();
+    onInput?.(event);
+  };
+  const classes = classnames(
+    "textarea",
+    className,
+    {
+      "textarea--error": state === "error",
+      "textarea--success": state === "success",
+      "textarea--width-short": width === "short",
+      "textarea--width-default": width === "default",
+      "textarea--width-max": width === "max",
+      "textarea--auto-grow": autoGrow
+    }
+  );
   return /* @__PURE__ */ jsx(
     "textarea",
     {
+      ref: textareaRef,
       className: classes,
       disabled,
+      onInput: handleInput,
       ...props
     }
   );

package/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":";;;AASA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,UAAA,EAAY,SAAA,EAAW;AAAA,IAChD,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GAClB,CAAA;AAEH,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.js","sourcesContent":["import React from 'react';\n// import './textarea.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('textarea', className, {\n    error: state === 'error',\n    success: state === 'success',\n    });\n\n  return (\n    <textarea\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;"]}
+{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":";;;;AAmBA,SAAS,gBAAgB,KAAA,EAAe;AACtC,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAEtC,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,GACzB,MAAA,GACA,CAAA;AACN;AAEA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GACJ,OAA4B,IAAI,CAAA;AAElC,EAAA,MAAM,eAAA,GACJ,YAAY,MAAM;AAChB,IAAA,MAAM,WACJ,WAAA,CAAY,OAAA;AAEd,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,QAAA,EAAU;AAC1B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GACJ,MAAA,CAAO,gBAAA,CAAiB,QAAQ,CAAA;AAElC,IAAA,MAAM,UAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,YAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB,GACA,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,SAAA,GACJ,eAAA;AAAA,MACE,aAAA,CAAc;AAAA,KAChB;AAEF,IAAA,MAAM,iBAAA,GACJ,SAAS,KAAA,CAAM,SAAA;AAEjB,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,KAAA;AAEF,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,gBACJ,QAAA,CAAS,YAAA;AAEX,IAAA,QAAA,CAAS,MAAM,SAAA,GACb,iBAAA;AAEF,IAAA,MAAM,aAAa,IAAA,CAAK,GAAA;AAAA,MACtB,gBACE,UAAA,GACA,YAAA;AAAA,MACF;AAAA,KACF;AAEA,IAAA,QAAA,CAAS,KAAA,CAAM,WAAA;AAAA,MACb,wBAAA;AAAA,MACA,GAAG,UAAU,CAAA,EAAA;AAAA,KACf;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEf,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,eAAA,EAAgB;AAAA,EAClB,CAAA,EAAG;AAAA,IACD,eAAA;AAAA,IACA,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KACG;AACH,IAAA,eAAA,EAAgB;AAChB,IAAA,OAAA,GAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,UAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,mBACE,KAAA,KAAU,OAAA;AAAA,MACZ,qBACE,KAAA,KAAU,SAAA;AAAA,MACZ,yBACE,KAAA,KAAU,OAAA;AAAA,MACZ,2BACE,KAAA,KAAU,SAAA;AAAA,MACZ,uBACE,KAAA,KAAU,KAAA;AAAA,MACZ,qBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"textarea.js","sourcesContent":["import React, {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { classnames } from '../helpers/classnames';\n\ntype TextareaWidth =\n  | 'short'\n  | 'default'\n  | 'max';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: TextareaWidth;\n  autoGrow?: boolean;\n}\n\nfunction parsePixelValue(value: string) {\n  const parsed = Number.parseFloat(value);\n\n  return Number.isFinite(parsed)\n    ? parsed\n    : 0;\n}\n\nconst Textarea: React.FC<TextareaProps> = ({\n  state = 'default',\n  width = 'default',\n  autoGrow = false,\n  className = '',\n  disabled = false,\n  onInput,\n  ...props\n}) => {\n  const textareaRef =\n    useRef<HTMLTextAreaElement>(null);\n\n  const resizeToContent =\n    useCallback(() => {\n      const textarea =\n        textareaRef.current;\n\n      if (!autoGrow || !textarea) {\n        return;\n      }\n\n      const computedStyle =\n        window.getComputedStyle(textarea);\n\n      const lineHeight =\n        parsePixelValue(\n          computedStyle.lineHeight,\n        );\n\n      const borderHeight =\n        parsePixelValue(\n          computedStyle.borderTopWidth,\n        ) +\n        parsePixelValue(\n          computedStyle.borderBottomWidth,\n        );\n\n      const minHeight =\n        parsePixelValue(\n          computedStyle.minHeight,\n        );\n\n      const previousMinHeight =\n        textarea.style.minHeight;\n\n      textarea.style.minHeight =\n        '0px';\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        '0px',\n      );\n\n      const contentHeight =\n        textarea.scrollHeight;\n\n      textarea.style.minHeight =\n        previousMinHeight;\n\n      const nextHeight = Math.max(\n        contentHeight +\n          lineHeight +\n          borderHeight,\n        minHeight,\n      );\n\n      textarea.style.setProperty(\n        '--textarea-auto-height',\n        `${nextHeight}px`,\n      );\n    }, [autoGrow]);\n\n  useLayoutEffect(() => {\n    resizeToContent();\n  }, [\n    resizeToContent,\n    props.value,\n    width,\n  ]);\n\n  const handleInput = (\n    event: React.InputEvent<HTMLTextAreaElement>,\n  ) => {\n    resizeToContent();\n    onInput?.(event);\n  };\n\n  const classes = classnames(\n    'textarea',\n    className,\n    {\n      'textarea--error':\n        state === 'error',\n      'textarea--success':\n        state === 'success',\n      'textarea--width-short':\n        width === 'short',\n      'textarea--width-default':\n        width === 'default',\n      'textarea--width-max':\n        width === 'max',\n      'textarea--auto-grow':\n        autoGrow,\n    },\n  );\n\n  return (\n    <textarea\n      ref={textareaRef}\n      className={classes}\n      disabled={disabled}\n      onInput={handleInput}\n      {...props}\n    />\n  );\n};\n\nexport default Textarea;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -2758,7 +2758,7 @@
   --flip-list-open-content-gap:
     var(--font-h2-margin);
   --flip-list-trigger-column-gap:
-    var(--margin-item);
+    var(--margin-icon);
   --flip-list-scroll-margin-block-start:
     0px;
 
@@ -2831,74 +2831,92 @@
   /* motion */
 }
 
-.flip-list__trigger {
+.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__heading {
   /* color */
-  background: transparent;
-  color: var(--flip-list-trigger-color);
 
   /* typography */
-  font: inherit;
-  text-align: left;
 
   /* size */
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--flip-list-trigger-column-gap);
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  padding: 0;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.flip-list__trigger:focus-visible {
+.flip-list__trigger {
   /* color */
+  background: transparent;
+  color: var(--flip-list-trigger-color);
 
   /* typography */
+  font: inherit;
+  text-align: left;
 
   /* size */
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
 
   /* border */
-  outline:
-    var(--size-border-width-focus)
-    solid
-    currentColor;
-  outline-offset:
-    var(--size-border-offset-focus);
+  border: 0;
 
   /* depth */
 
   /* motion */
+  cursor: pointer;
 }
 
-.flip-list__status {
+.flip-list__trigger:focus-visible {
   /* 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 */
+  outline:
+    var(--size-border-width-focus)
+    solid
+    currentColor;
+  outline-offset:
+    var(--size-border-offset-focus);
 
   /* depth */
 
@@ -2927,7 +2945,6 @@
   text-underline-offset: from-font;
 
   /* size */
-  flex: 1 1 auto;
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
@@ -2955,6 +2972,21 @@
   /* motion */
 }
 
+.flip-list__status-icon {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 0 0 auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__meta {
   /* color */
   color: var(--flip-list-meta-color);
@@ -2976,6 +3008,7 @@
   flex: 0 0 auto;
   min-width: 0;
   max-width: 100%;
+  margin-left: auto;
 
   /* border */
 
@@ -3133,6 +3166,7 @@
   --input-height: var(--size-control-height);
   --input-padding-x: var(--padding-control-horz);
 
+  box-sizing: border-box;
   height: var(--input-height);
   padding-inline: var(--input-padding-x);
 
@@ -3161,6 +3195,21 @@
     background-color var(--input-transition-duration) ease;
 }
 
+.input--width-short {
+  /* size */
+  width: auto;
+}
+
+.input--width-default {
+  /* size */
+  width: 400px;
+}
+
+.input--width-max {
+  /* size */
+  width: 100%;
+}
+
 .input::placeholder {
   color: var(--input-placeholder);
 }
@@ -4248,7 +4297,7 @@
 
   position: relative;
   display: inline-block;
-  width: 100%;
+  box-sizing: border-box;
 
   /* border */
   --select-border-width: var(--size-border-width-base);
@@ -4269,6 +4318,21 @@
   --select-transition-duration: 0.2s;
 }
 
+.select--width-short {
+  /* size */
+  width: fit-content;
+}
+
+.select--width-default {
+  /* size */
+  width: 400px;
+}
+
+.select--width-max {
+  /* size */
+  width: 100%;
+}
+
 .select__field {
   /* color */
   background: var(--select-bg);
@@ -4279,6 +4343,7 @@
   letter-spacing: inherit;
 
   /* size */
+  box-sizing: border-box;
   width: 100%;
   height: var(--select-height);
   padding-left: var(--select-padding-x);
@@ -4684,6 +4749,7 @@
   --textarea-padding-x: var(--padding-control-horz);
   --textarea-padding-y: var(--padding-control-horz);
 
+  box-sizing: border-box;
   min-height: var(--textarea-min-height);
   padding: var(--textarea-padding-y) var(--textarea-padding-x);
 
@@ -4713,6 +4779,30 @@
     background-color var(--textarea-transition-duration) ease;
 }
 
+.textarea--width-short {
+  /* size */
+  width: auto;
+}
+
+.textarea--width-default {
+  /* size */
+  width: 400px;
+}
+
+.textarea--width-max {
+  /* size */
+  width: 100%;
+}
+
+.textarea--auto-grow {
+  /* size */
+  height: var(--textarea-auto-height);
+
+  /* motion */
+  overflow-y: hidden;
+  resize: none;
+}
+
 .textarea::placeholder {
   color: var(--textarea-placeholder);
 }