@chayns-ui/core 0.3.2 → 0.4.1

package/dist/text-field.css

@@ -0,0 +1,138 @@
+@layer chayns.components {
+  .chayns-text-field {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .chayns-text-field__input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding: var(--input-py) var(--input-px);
+    border: 1.5px solid var(--input-border);
+    border-radius: 10px;
+    font: inherit;
+    font-size: var(--fs-body);
+    line-height: 1.2;
+    color: var(--text);
+    background: var(--surface);
+    outline: none;
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.18s ease;
+  }
+
+  .chayns-text-field__label {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 10px;
+    padding-inline: var(--k5);
+    color: var(--text-3);
+    pointer-events: none;
+    font-size: var(--fs-body);
+    font-weight: 400;
+    line-height: 1.2;
+    white-space: nowrap;
+    background: var(--surface);
+    transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
+    transform-origin: left center;
+    transition:
+      transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+      color 0.15s ease;
+  }
+
+  :where(.chayns-text-field__input:hover:not(:disabled)) {
+    border-color: var(--text-3);
+  }
+
+  .chayns-text-field__input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  }
+
+  .chayns-text-field__input:disabled {
+    color: var(--disabled-fg);
+    cursor: not-allowed;
+    background: var(--disabled-bg);
+    border-color: var(--disabled-border);
+  }
+
+  .chayns-text-field__input:read-only {
+    color: var(--text-2);
+    cursor: text;
+    background: var(--surface-2);
+  }
+
+  .chayns-text-field--error .chayns-text-field__label {
+    color: var(--danger);
+  }
+
+  .chayns-text-field__input:disabled + .chayns-text-field__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-text-field__input:read-only + .chayns-text-field__label {
+    background: var(--surface-2);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input {
+    border-color: var(--danger);
+  }
+
+  .chayns-text-field__input:focus + .chayns-text-field__label,
+  .chayns-text-field__input:not(:placeholder-shown) + .chayns-text-field__label {
+    transform: translateY(-50%) scale(0.8);
+  }
+
+  .chayns-text-field__input:focus + .chayns-text-field__label {
+    color: var(--accent);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input:focus + .chayns-text-field__label {
+    color: var(--danger);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input:disabled {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+    border-color: var(--disabled-border);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input:disabled + .chayns-text-field__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input:focus {
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  }
+
+  .chayns-text-field__help {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--k10);
+    margin-block-start: 6px;
+    font-size: var(--fs-caption);
+    color: var(--text-3);
+  }
+
+  .chayns-text-field__error {
+    color: var(--danger);
+  }
+
+  @media (forced-colors: active) {
+    .chayns-text-field__input:focus-visible {
+      outline: var(--focus-ring-size) solid ButtonText;
+      outline-offset: 1px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-text-field__label {
+      transition: none;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -29,6 +29,13 @@
     "./accordion.css": "./dist/accordion.css",
     "./popup.css": "./dist/popup.css",
     "./split-button.css": "./dist/split-button.css",
+    "./text-field.css": "./dist/text-field.css",
+    "./text-area.css": "./dist/text-area.css",
+    "./checkbox.css": "./dist/checkbox.css",
+    "./switch.css": "./dist/switch.css",
+    "./radio-group.css": "./dist/radio-group.css",
+    "./segmented-control.css": "./dist/segmented-control.css",
+    "./message-box.css": "./dist/message-box.css",
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },

package/dist/components/list-item/ListItem.d.ts

@@ -1,4 +0,0 @@
-import type { ListItemProps } from '../list/List.types.js';
-declare const ListItem: ({ className, disabled, href, id, leading, onClick, subtitle, title, trailing, unread, unreadLabel, }: ListItemProps) => import("react").JSX.Element;
-export default ListItem;
-//# sourceMappingURL=ListItem.d.ts.map

package/dist/components/list-item/ListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/list-item/ListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,QAAA,MAAM,QAAQ,GAAI,sGAYf,aAAa,gCA0Cf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/list-item/ListItem.js

@@ -1,42 +0,0 @@
-import ListItemBody from "./list-item-body/ListItemBody.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/list-item/ListItem.tsx
-var ListItem = ({ className, disabled = false, href, id, leading, onClick, subtitle, title, trailing, unread = false, unreadLabel }) => {
-	const actionClassName = ["chayns-list-item__action", Boolean(href) || Boolean(onClick) ? "chayns-list-item__action--interactive" : null].filter(Boolean).join(" ");
-	const body = /* @__PURE__ */ jsx(ListItemBody, {
-		leading,
-		subtitle,
-		title,
-		unread,
-		unreadLabel
-	});
-	let action;
-	if (href) action = /* @__PURE__ */ jsx("a", {
-		className: actionClassName,
-		href,
-		children: body
-	});
-	else if (onClick) action = /* @__PURE__ */ jsx("button", {
-		className: actionClassName,
-		disabled,
-		onClick,
-		type: "button",
-		children: body
-	});
-	else action = /* @__PURE__ */ jsx("div", {
-		className: actionClassName,
-		children: body
-	});
-	return /* @__PURE__ */ jsxs("li", {
-		className: ["chayns-list-item", className].filter(Boolean).join(" "),
-		id,
-		children: [action, trailing ? /* @__PURE__ */ jsx("span", {
-			className: "chayns-list-item__trailing",
-			children: trailing
-		}) : null]
-	});
-};
-//#endregion
-export { ListItem as default };
-
-//# sourceMappingURL=ListItem.js.map

package/dist/components/list-item/ListItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.js","names":[],"sources":["../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { ListItemProps } from '../list/List.types.js';\nimport ListItemBody from './list-item-body/ListItemBody.js';\n\nconst ListItem = ({\n  className,\n  disabled = false,\n  href,\n  id,\n  leading,\n  onClick,\n  subtitle,\n  title,\n  trailing,\n  unread = false,\n  unreadLabel,\n}: ListItemProps) => {\n  const interactive = Boolean(href) || Boolean(onClick);\n  const actionClassName = [\n    'chayns-list-item__action',\n    interactive ? 'chayns-list-item__action--interactive' : null,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const body = (\n    <ListItemBody\n      leading={leading}\n      subtitle={subtitle}\n      title={title}\n      unread={unread}\n      unreadLabel={unreadLabel}\n    />\n  );\n\n  let action: ReactNode;\n  if (href) {\n    action = (\n      <a className={actionClassName} href={href}>\n        {body}\n      </a>\n    );\n  } else if (onClick) {\n    action = (\n      <button className={actionClassName} disabled={disabled} onClick={onClick} type=\"button\">\n        {body}\n      </button>\n    );\n  } else {\n    action = <div className={actionClassName}>{body}</div>;\n  }\n\n  return (\n    <li className={['chayns-list-item', className].filter(Boolean).join(' ')} id={id}>\n      {action}\n      {trailing ? <span className=\"chayns-list-item__trailing\">{trailing}</span> : null}\n    </li>\n  );\n};\n\nexport default ListItem;\n"],"mappings":";;;AAKA,IAAM,YAAY,EAChB,WACA,WAAW,OACX,MACA,IACA,SACA,SACA,UACA,OACA,UACA,SAAS,OACT,kBACmB;CAEnB,MAAM,kBAAkB,CACtB,4BAFkB,QAAQ,IAAI,KAAK,QAAQ,OAAO,IAGpC,0CAA0C,IAC1D,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,OACJ,oBAAC,cAAD;EACW;EACC;EACH;EACC;EACK;CACd,CAAA;CAGH,IAAI;CACJ,IAAI,MACF,SACE,oBAAC,KAAD;EAAG,WAAW;EAAuB;EAClC,UAAA;CACA,CAAA;MAEA,IAAI,SACT,SACE,oBAAC,UAAD;EAAQ,WAAW;EAA2B;EAAmB;EAAS,MAAK;EAC5E,UAAA;CACK,CAAA;MAGV,SAAS,oBAAC,OAAD;EAAK,WAAW;EAAkB,UAAA;CAAU,CAAA;CAGvD,OACE,qBAAC,MAAD;EAAI,WAAW,CAAC,oBAAoB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAAO;EAA9E,UAAA,CACG,QACA,WAAW,oBAAC,QAAD;GAAM,WAAU;GAA8B,UAAA;EAAe,CAAA,IAAI,IAC3E;;AAER"}

package/dist/components/list-item/list-item-body/ListItemBody.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-declare const ListItemBody: ({ leading, subtitle, title, unread, unreadLabel, }: {
-    leading?: ReactNode;
-    subtitle?: ReactNode;
-    title: ReactNode;
-    unread?: boolean;
-    unreadLabel?: string | undefined;
-}) => import("react").JSX.Element;
-export default ListItemBody;
-//# sourceMappingURL=ListItemBody.d.ts.map

package/dist/components/list-item/list-item-body/ListItemBody.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemBody.d.ts","sourceRoot":"","sources":["../../../../src/components/list-item/list-item-body/ListItemBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,QAAA,MAAM,YAAY,GAAI,oDAMnB;IACD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC,gCAaA,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/list-item/list-item-body/ListItemBody.js

@@ -1,30 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/list-item/list-item-body/ListItemBody.tsx
-var ListItemBody = ({ leading, subtitle, title, unread, unreadLabel }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-	unread ? /* @__PURE__ */ jsx("span", {
-		className: "chayns-list-item__unread",
-		"aria-hidden": unreadLabel ? void 0 : true,
-		children: unreadLabel ? /* @__PURE__ */ jsx("span", {
-			className: "chayns-visually-hidden",
-			children: unreadLabel
-		}) : null
-	}) : null,
-	leading ? /* @__PURE__ */ jsx("span", {
-		className: "chayns-list-item__leading",
-		children: leading
-	}) : null,
-	/* @__PURE__ */ jsxs("span", {
-		className: "chayns-list-item__body",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "chayns-list-item__title",
-			children: title
-		}), subtitle ? /* @__PURE__ */ jsx("span", {
-			className: "chayns-list-item__subtitle",
-			children: subtitle
-		}) : null]
-	})
-] });
-//#endregion
-export { ListItemBody as default };
-
-//# sourceMappingURL=ListItemBody.js.map

package/dist/components/list-item/list-item-body/ListItemBody.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemBody.js","names":[],"sources":["../../../../src/components/list-item/list-item-body/ListItemBody.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nconst ListItemBody = ({\n  leading,\n  subtitle,\n  title,\n  unread,\n  unreadLabel,\n}: {\n  leading?: ReactNode;\n  subtitle?: ReactNode;\n  title: ReactNode;\n  unread?: boolean;\n  unreadLabel?: string | undefined;\n}) => (\n  <>\n    {unread ? (\n      <span className=\"chayns-list-item__unread\" aria-hidden={unreadLabel ? undefined : true}>\n        {unreadLabel ? <span className=\"chayns-visually-hidden\">{unreadLabel}</span> : null}\n      </span>\n    ) : null}\n    {leading ? <span className=\"chayns-list-item__leading\">{leading}</span> : null}\n    <span className=\"chayns-list-item__body\">\n      <span className=\"chayns-list-item__title\">{title}</span>\n      {subtitle ? <span className=\"chayns-list-item__subtitle\">{subtitle}</span> : null}\n    </span>\n  </>\n);\n\nexport default ListItemBody;\n"],"mappings":";;AAEA,IAAM,gBAAgB,EACpB,SACA,UACA,OACA,QACA,kBAQA,qBAAA,UAAA,EAAA,UAAA;CACG,SACC,oBAAC,QAAD;EAAM,WAAU;EAA2B,eAAa,cAAc,KAAA,IAAY;EAC/E,UAAA,cAAc,oBAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAkB,CAAA,IAAI;CAC3E,CAAA,IACJ;CACH,UAAU,oBAAC,QAAD;EAAM,WAAU;EAA6B,UAAA;CAAc,CAAA,IAAI;CAC1E,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAY,CAAA,GACtD,WAAW,oBAAC,QAAD;GAAM,WAAU;GAA8B,UAAA;EAAe,CAAA,IAAI,IACzE;;AACN,EAAA,CAAA"}