@themodcraft/core-ui 1.1.1 → 1.1.2

package/dist/components/divider/index.js

@@ -1 +1 @@
-export { Divider } from "./Divider";
+export { Divider } from './Divider.js';

package/dist/components/radio/Radio.client.d.ts

@@ -0,0 +1,2 @@
+import type { RadioGroupProps } from "./Radio.types";
+export declare function SmartRadioGroup({ defaultValue, description, label, name, onChange, onValueChange, options, value, ...props }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/radio/Radio.client.js

@@ -0,0 +1,142 @@
+"use client";
+import { c } from 'react/compiler-runtime';
+import { Radio } from './Radio.js';
+import styles from './Radio.module.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SmartRadioGroup(t0) {
+  const $ = c(35);
+  let defaultValue;
+  let description;
+  let label;
+  let name;
+  let onChange;
+  let onValueChange;
+  let options;
+  let props;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      defaultValue,
+      description,
+      label,
+      name,
+      onChange,
+      onValueChange,
+      options,
+      value,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = defaultValue;
+    $[2] = description;
+    $[3] = label;
+    $[4] = name;
+    $[5] = onChange;
+    $[6] = onValueChange;
+    $[7] = options;
+    $[8] = props;
+    $[9] = value;
+  } else {
+    defaultValue = $[1];
+    description = $[2];
+    label = $[3];
+    name = $[4];
+    onChange = $[5];
+    onValueChange = $[6];
+    options = $[7];
+    props = $[8];
+    value = $[9];
+  }
+  let t1;
+  if ($[10] !== label) {
+    t1 = label ? /*#__PURE__*/jsx("legend", {
+      className: styles.groupLegend,
+      children: label
+    }) : null;
+    $[10] = label;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  let t2;
+  if ($[12] !== description) {
+    t2 = description ? /*#__PURE__*/jsx("p", {
+      className: styles.groupDescription,
+      children: description
+    }) : null;
+    $[12] = description;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  let t3;
+  if ($[14] !== defaultValue || $[15] !== name || $[16] !== onChange || $[17] !== onValueChange || $[18] !== options || $[19] !== props || $[20] !== value) {
+    let t4;
+    if ($[22] !== defaultValue || $[23] !== name || $[24] !== onChange || $[25] !== onValueChange || $[26] !== props || $[27] !== value) {
+      t4 = option => /*#__PURE__*/jsx(Radio, {
+        checked: value !== undefined ? value === option.value : undefined,
+        defaultChecked: defaultValue === option.value,
+        description: option.description,
+        disabled: props.disabled || option.disabled,
+        name: name,
+        onChange: event => {
+          onChange?.(event);
+          if (event.target.checked) {
+            onValueChange?.(option.value);
+          }
+        },
+        required: props.required,
+        value: option.value,
+        children: option.label
+      }, option.value);
+      $[22] = defaultValue;
+      $[23] = name;
+      $[24] = onChange;
+      $[25] = onValueChange;
+      $[26] = props;
+      $[27] = value;
+      $[28] = t4;
+    } else {
+      t4 = $[28];
+    }
+    t3 = options.map(t4);
+    $[14] = defaultValue;
+    $[15] = name;
+    $[16] = onChange;
+    $[17] = onValueChange;
+    $[18] = options;
+    $[19] = props;
+    $[20] = value;
+    $[21] = t3;
+  } else {
+    t3 = $[21];
+  }
+  let t4;
+  if ($[29] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: styles.options,
+      children: t3
+    });
+    $[29] = t3;
+    $[30] = t4;
+  } else {
+    t4 = $[30];
+  }
+  let t5;
+  if ($[31] !== t1 || $[32] !== t2 || $[33] !== t4) {
+    t5 = /*#__PURE__*/jsxs("fieldset", {
+      className: styles.groupRoot,
+      children: [t1, t2, t4]
+    });
+    $[31] = t1;
+    $[32] = t2;
+    $[33] = t4;
+    $[34] = t5;
+  } else {
+    t5 = $[34];
+  }
+  return t5;
+}
+
+export { SmartRadioGroup };

package/dist/components/radio/Radio.d.ts

@@ -1,3 +1,3 @@
 import type { RadioGroupProps, RadioProps } from "./Radio.types";
 export declare function Radio({ description, label, children, ...props }: RadioProps): import("react").JSX.Element;
-export declare function RadioGroup({ defaultValue, description, label, name, onChange, onValueChange, options, value, ...props }: RadioGroupProps): import("react").JSX.Element;
+export declare function RadioGroup({ defaultValue, description, label, name, onChange, onValueChange: _onValueChange, options, value, ...props }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/radio/Radio.js

@@ -1,79 +1,64 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { useContrastedFieldStyle } from "../text-input/shared";
-const RadioRoot = styled.label `
-  align-items: flex-start;
-  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
-  cursor: pointer;
-  display: inline-flex;
-  gap: 0.7rem;
-`;
-const RadioInput = styled.input `
-  accent-color: var(--cta-color, var(--tmc-color-accent, #2454d6));
-  cursor: pointer;
-  flex: 0 0 auto;
-  height: 1.1rem;
-  margin-top: 0.1rem;
-  width: 1.1rem;
+import styles from './Radio.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-  &:focus-visible {
-    outline: 2px solid var(--tmc-color-accent, #2454d6);
-    outline-offset: 3px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-`;
-const Copy = styled.span `
-  display: grid;
-  gap: 0.2rem;
-  line-height: 1.35;
-`;
-const Label = styled.span `
-  color: inherit;
-  font-size: 0.95rem;
-  font-weight: 600;
-`;
-const Description = styled.span `
-  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
-  font-size: 0.82rem;
-`;
-const GroupRoot = styled.fieldset `
-  border: 0;
-  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
-  display: grid;
-  gap: 0.65rem;
-  margin: 0;
-  min-inline-size: 0;
-  padding: 0;
-`;
-const GroupLegend = styled.legend `
-  color: inherit;
-  font-size: 0.9rem;
-  font-weight: 650;
-  margin: 0 0 0.35rem;
-  padding: 0;
-`;
-const GroupDescription = styled.p `
-  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
-  font-size: 0.82rem;
-  line-height: 1.45;
-  margin: -0.25rem 0 0.25rem;
-`;
-const Options = styled.div `
-  display: grid;
-  gap: 0.75rem;
-`;
-export function Radio({ description, label, children, ...props }) {
-    const fieldStyle = useContrastedFieldStyle();
-    return (_jsxs(RadioRoot, { ...fieldStyle, children: [_jsx(RadioInput, { type: "radio", ...props }), (label || description || children) && (_jsxs(Copy, { children: [(label || children) && _jsx(Label, { children: label ?? children }), description && _jsx(Description, { children: description })] }))] }));
+function Radio({
+  description,
+  label,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs("label", {
+    className: styles.radioRoot,
+    children: [/*#__PURE__*/jsx("input", {
+      className: styles.radioInput,
+      type: "radio",
+      ...props
+    }), (label || description || children) && /*#__PURE__*/jsxs("span", {
+      className: styles.copy,
+      children: [(label || children) && /*#__PURE__*/jsx("span", {
+        className: styles.label,
+        children: label ?? children
+      }), description && /*#__PURE__*/jsx("span", {
+        className: styles.description,
+        children: description
+      })]
+    })]
+  });
 }
-export function RadioGroup({ defaultValue, description, label, name, onChange, onValueChange, options, value, ...props }) {
-    const fieldStyle = useContrastedFieldStyle();
-    return (_jsxs(GroupRoot, { ...fieldStyle, children: [label ? _jsx(GroupLegend, { children: label }) : null, description ? _jsx(GroupDescription, { children: description }) : null, _jsx(Options, { children: options.map((option) => (_jsx(Radio, { checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, description: option.description, disabled: props.disabled || option.disabled, name: name, onChange: (event) => { onChange?.(event); if (event.target.checked) {
-                        onValueChange?.(option.value);
-                    } }, required: props.required, value: option.value, children: option.label }, option.value))) })] }));
+function RadioGroup({
+  defaultValue,
+  description,
+  label,
+  name,
+  onChange,
+  onValueChange: _onValueChange,
+  options,
+  value,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs("fieldset", {
+    className: styles.groupRoot,
+    children: [label ? /*#__PURE__*/jsx("legend", {
+      className: styles.groupLegend,
+      children: label
+    }) : null, description ? /*#__PURE__*/jsx("p", {
+      className: styles.groupDescription,
+      children: description
+    }) : null, /*#__PURE__*/jsx("div", {
+      className: styles.options,
+      children: options.map(option => /*#__PURE__*/jsx(Radio, {
+        checked: value !== undefined ? value === option.value : undefined,
+        defaultChecked: defaultValue === option.value,
+        description: option.description,
+        disabled: props.disabled || option.disabled,
+        name: name,
+        onChange: onChange,
+        required: props.required,
+        value: option.value,
+        children: option.label
+      }, option.value))
+    })]
+  });
 }
+
+export { Radio, RadioGroup };

package/dist/components/radio/Radio.module.css

@@ -0,0 +1 @@
+.radioRoot{align-items:flex-start;color:var(--tmc-field-label-text,var(--tmc-field-auto-text,var(--tmc-color-text,#151821)));cursor:pointer;display:inline-flex;gap:.7rem}.radioInput{accent-color:var(--cta-color,var(--tmc-color-accent,#2454d6));cursor:pointer;flex:0 0 auto;height:1.1rem;margin-top:.1rem;width:1.1rem}.radioInput:focus-visible{outline:2px solid var(--tmc-color-accent,#2454d6);outline-offset:3px}.radioInput:disabled{cursor:not-allowed;opacity:.55}.copy{display:grid;gap:.2rem;line-height:1.35}.label{color:inherit;font-size:.95rem;font-weight:600}.description{color:var(--tmc-field-description-text,var(--tmc-color-text-muted,var(--tmc-field-auto-text,#5f6b7a)));font-size:.82rem}.groupRoot{border:0;color:var(--tmc-field-label-text,var(--tmc-field-auto-text,var(--tmc-color-text,#151821)));display:grid;gap:.65rem;margin:0;min-inline-size:0;padding:0}.groupLegend{color:inherit;font-size:.9rem;font-weight:650;margin:0 0 .35rem;padding:0}.groupDescription{color:var(--tmc-field-description-text,var(--tmc-color-text-muted,var(--tmc-field-auto-text,#5f6b7a)));font-size:.82rem;line-height:1.45;margin:-.25rem 0 .25rem}.options{display:grid;gap:.75rem}

package/dist/components/radio/index.d.ts

@@ -1,2 +1,3 @@
 export { Radio, RadioGroup } from "./Radio";
+export { SmartRadioGroup } from "./Radio.client";
 export type { RadioGroupProps, RadioOption, RadioProps } from "./Radio.types";

package/dist/components/radio/index.js

@@ -1 +1,2 @@
-export { Radio, RadioGroup } from "./Radio";
+export { Radio, RadioGroup } from './Radio.js';
+export { SmartRadioGroup } from './Radio.client.js';

package/dist/components/slider/Slider.js

@@ -1,86 +1,33 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { useContrastedFieldStyle } from "../text-input/shared";
-const SliderRoot = styled.label `
-  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--primary-text, var(--tmc-color-text, #151821))));
-  display: grid;
-  gap: 0.55rem;
-  width: 100%;
-`;
-const SliderHeader = styled.span `
-  align-items: center;
-  display: flex;
-  font-size: 0.9rem;
-  font-weight: 600;
-  gap: 0.75rem;
-  justify-content: space-between;
-`;
-const SliderValue = styled.span `
-  color: var(--tmc-field-description-text, var(--tmc-field-auto-text, var(--secondary-text, var(--tmc-color-text-muted, #5f6b7a))));
-  font-size: 0.8rem;
-  font-variant-numeric: tabular-nums;
-`;
-const SliderInput = styled.input `
-  --slider-track: var(--neutral-600, var(--tmc-color-surface-muted, #e7ebf0));
-  --slider-fill: var(--cta-color, var(--tmc-color-accent, #2454d6));
-  --slider-thumb: var(--tmc-color-surface-raised, #fbfcfe);
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-  height: 1.5rem;
-  width: 100%;
+import styles from './Slider.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-  &::-webkit-slider-runnable-track {
-    background: linear-gradient(90deg, var(--slider-fill), var(--slider-track));
-    border-radius: 999px;
-    height: 0.45rem;
-  }
-
-  &::-webkit-slider-thumb {
-    appearance: none;
-    background: var(--slider-thumb);
-    border: 2px solid var(--slider-fill);
-    border-radius: 999px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
-    height: 1.15rem;
-    margin-top: -0.35rem;
-    width: 1.15rem;
-  }
-
-  &::-moz-range-track {
-    background: var(--slider-track);
-    border-radius: 999px;
-    height: 0.45rem;
-  }
-
-  &::-moz-range-progress {
-    background: var(--slider-fill);
-    border-radius: 999px;
-    height: 0.45rem;
-  }
-
-  &::-moz-range-thumb {
-    background: var(--slider-thumb);
-    border: 2px solid var(--slider-fill);
-    border-radius: 999px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
-    height: 1.15rem;
-    width: 1.15rem;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--slider-fill);
-    outline-offset: 4px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-`;
-export function Slider({ label, showValue, value, valueLabel, defaultValue, ...props }) {
-    const renderedValue = valueLabel ?? value ?? defaultValue;
-    const fieldStyle = useContrastedFieldStyle();
-    return (_jsxs(SliderRoot, { ...fieldStyle, children: [(label || showValue) && (_jsxs(SliderHeader, { children: [label && _jsx("span", { children: label }), showValue && renderedValue !== undefined && _jsx(SliderValue, { children: renderedValue })] })), _jsx(SliderInput, { defaultValue: defaultValue, type: "range", value: value, ...props })] }));
+function Slider({
+  label,
+  showValue,
+  value,
+  valueLabel,
+  defaultValue,
+  ...props
+}) {
+  const renderedValue = valueLabel ?? value ?? defaultValue;
+  return /*#__PURE__*/jsxs("label", {
+    className: styles.sliderRoot,
+    children: [(label || showValue) && /*#__PURE__*/jsxs("span", {
+      className: styles.sliderHeader,
+      children: [label && /*#__PURE__*/jsx("span", {
+        children: label
+      }), showValue && renderedValue !== undefined && /*#__PURE__*/jsx("span", {
+        className: styles.sliderValue,
+        children: renderedValue
+      })]
+    }), /*#__PURE__*/jsx("input", {
+      className: styles.sliderInput,
+      defaultValue: defaultValue,
+      type: "range",
+      value: value,
+      ...props
+    })]
+  });
 }
+
+export { Slider };

package/dist/components/slider/Slider.module.css

@@ -0,0 +1 @@
+.sliderRoot{color:var(--tmc-field-label-text,var(--tmc-field-auto-text,var(--primary-text,var(--tmc-color-text,#151821))));display:grid;gap:.55rem;width:100%}.sliderHeader{align-items:center;display:flex;font-size:.9rem;font-weight:600;gap:.75rem;justify-content:space-between}.sliderValue{color:var(--tmc-field-description-text,var(--tmc-field-auto-text,var(--secondary-text,var(--tmc-color-text-muted,#5f6b7a))));font-size:.8rem;font-variant-numeric:tabular-nums}.sliderInput{--slider-track:var(--neutral-600,var(--tmc-color-surface-muted,#e7ebf0));--slider-fill:var(--cta-color,var(--tmc-color-accent,#2454d6));--slider-thumb:var(--tmc-color-surface-raised,#fbfcfe);appearance:none;background:transparent;cursor:pointer;height:1.5rem;width:100%}.sliderInput::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--slider-fill),var(--slider-track));border-radius:999px;height:.45rem}.sliderInput::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);border:2px solid var(--slider-fill);border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.24);height:1.15rem;margin-top:-.35rem;width:1.15rem}.sliderInput::-moz-range-track{background:var(--slider-track);border-radius:999px;height:.45rem}.sliderInput::-moz-range-progress{background:var(--slider-fill);border-radius:999px;height:.45rem}.sliderInput::-moz-range-thumb{background:var(--slider-thumb);border:2px solid var(--slider-fill);border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.24);height:1.15rem;width:1.15rem}.sliderInput:focus-visible{outline:2px solid var(--slider-fill);outline-offset:4px}.sliderInput:disabled{cursor:not-allowed;opacity:.55}

package/dist/components/slider/index.js

@@ -1 +1 @@
-export { Slider } from "./Slider";
+export { Slider } from './Slider.js';

package/dist/components/text-input/AuthFields.js

@@ -1,15 +1,61 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TextInput } from "./TextInput";
-export function UsernameField({ autoComplete = "username", label = "Username", type, ...props }) {
-    return _jsx(TextInput, { autoComplete: autoComplete, label: label, type: type ?? "text", ...props });
+import { TextInput } from './TextInput.js';
+import { jsx } from 'react/jsx-runtime';
+
+function UsernameField({
+  autoComplete = "username",
+  label = "Username",
+  type,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(TextInput, {
+    autoComplete: autoComplete,
+    label: label,
+    type: type ?? "text",
+    ...props
+  });
 }
-export function EmailField({ autoComplete = "email", inputMode = "email", label = "Email", type, ...props }) {
-    return _jsx(TextInput, { autoComplete: autoComplete, inputMode: inputMode, label: label, type: type ?? "email", ...props });
+function EmailField({
+  autoComplete = "email",
+  inputMode = "email",
+  label = "Email",
+  type,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(TextInput, {
+    autoComplete: autoComplete,
+    inputMode: inputMode,
+    label: label,
+    type: type ?? "email",
+    ...props
+  });
 }
-export function PasswordField({ autoComplete = "current-password", label = "Password", type, ...props }) {
-    return _jsx(TextInput, { autoComplete: autoComplete, label: label, type: type ?? "password", ...props });
+function PasswordField({
+  autoComplete = "current-password",
+  label = "Password",
+  type,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(TextInput, {
+    autoComplete: autoComplete,
+    label: label,
+    type: type ?? "password",
+    ...props
+  });
 }
-export function PhoneNumberField({ autoComplete = "tel", inputMode = "tel", label = "Phone number", type, ...props }) {
-    return _jsx(TextInput, { autoComplete: autoComplete, inputMode: inputMode, label: label, type: type ?? "tel", ...props });
+function PhoneNumberField({
+  autoComplete = "tel",
+  inputMode = "tel",
+  label = "Phone number",
+  type,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(TextInput, {
+    autoComplete: autoComplete,
+    inputMode: inputMode,
+    label: label,
+    type: type ?? "tel",
+    ...props
+  });
 }
+
+export { EmailField, PasswordField, PhoneNumberField, UsernameField };

package/dist/components/text-input/TextArea.js

@@ -1,18 +1,33 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { FieldDescription, FieldError, FieldLabel, FieldRoot, inputSurfaceStyles, useContrastedFieldStyle, useContrastedInputStyle, } from "./shared";
-const StyledTextArea = styled.textarea `
-  ${inputSurfaceStyles}
-  line-height: 1.5;
-  max-height: var(--tmc-textarea-max-height, 18rem);
-  min-height: 7rem;
-  overflow: auto;
-  padding: 0.75rem 0.85rem;
-  resize: vertical;
-`;
-export function TextArea({ description, error, label, "aria-invalid": ariaInvalid, style, ...props }) {
-    const fieldStyle = useContrastedFieldStyle();
-    const inputStyle = useContrastedInputStyle(style);
-    return (_jsxs(FieldRoot, { ...fieldStyle, children: [label && _jsx(FieldLabel, { children: label }), _jsx(StyledTextArea, { "aria-invalid": ariaInvalid ?? Boolean(error), ...inputStyle, ...props }), description && !error ? _jsx(FieldDescription, { children: description }) : null, error ? _jsx(FieldError, { children: error }) : null] }));
+import { classNames } from './shared.js';
+import styles from './TextInput.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TextArea({
+  description,
+  error,
+  label,
+  "aria-invalid": ariaInvalid,
+  style,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs("label", {
+    className: styles.fieldRoot,
+    children: [label && /*#__PURE__*/jsx("span", {
+      className: styles.fieldLabel,
+      children: label
+    }), /*#__PURE__*/jsx("textarea", {
+      "aria-invalid": ariaInvalid ?? Boolean(error),
+      className: classNames(styles.inputSurface, styles.textarea),
+      style: style,
+      ...props
+    }), description && !error ? /*#__PURE__*/jsx("span", {
+      className: styles.fieldDescription,
+      children: description
+    }) : null, error ? /*#__PURE__*/jsx("span", {
+      className: styles.fieldError,
+      children: error
+    }) : null]
+  });
 }
+
+export { TextArea };

package/dist/components/text-input/TextInput.js

@@ -1,14 +1,33 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { FieldDescription, FieldError, FieldLabel, FieldRoot, inputSurfaceStyles, useContrastedFieldStyle, useContrastedInputStyle, } from "./shared";
-const StyledInput = styled.input `
-  ${inputSurfaceStyles}
-  min-height: 2.6rem;
-  padding: 0 0.85rem;
-`;
-export function TextInput({ description, error, label, "aria-invalid": ariaInvalid, style, ...props }) {
-    const fieldStyle = useContrastedFieldStyle();
-    const inputStyle = useContrastedInputStyle(style);
-    return (_jsxs(FieldRoot, { ...fieldStyle, children: [label && _jsx(FieldLabel, { children: label }), _jsx(StyledInput, { "aria-invalid": ariaInvalid ?? Boolean(error), ...inputStyle, ...props }), description && !error ? _jsx(FieldDescription, { children: description }) : null, error ? _jsx(FieldError, { children: error }) : null] }));
+import { classNames } from './shared.js';
+import styles from './TextInput.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TextInput({
+  description,
+  error,
+  label,
+  "aria-invalid": ariaInvalid,
+  style,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs("label", {
+    className: styles.fieldRoot,
+    children: [label && /*#__PURE__*/jsx("span", {
+      className: styles.fieldLabel,
+      children: label
+    }), /*#__PURE__*/jsx("input", {
+      "aria-invalid": ariaInvalid ?? Boolean(error),
+      className: classNames(styles.inputSurface, styles.input),
+      style: style,
+      ...props
+    }), description && !error ? /*#__PURE__*/jsx("span", {
+      className: styles.fieldDescription,
+      children: description
+    }) : null, error ? /*#__PURE__*/jsx("span", {
+      className: styles.fieldError,
+      children: error
+    }) : null]
+  });
 }
+
+export { TextInput };

package/dist/components/text-input/TextInput.module.css

@@ -0,0 +1 @@
+.fieldRoot{color:var(--tmc-field-label-text,var(--tmc-field-auto-text,var(--tmc-color-text,#151821)));display:grid;gap:.45rem;width:100%}.fieldLabel{color:inherit;font-size:.9rem;font-weight:650}.fieldDescription{color:var(--tmc-field-description-text,var(--tmc-color-text-muted,var(--tmc-field-auto-text,#5f6b7a)))}.fieldDescription,.fieldError{font-size:.82rem;line-height:1.45}.fieldError{color:var(--tmc-color-danger,#b42318)}.inputSurface{background:var(--tmc-color-surface-raised,#fbfcfe);border:1px solid var(--tmc-color-border,#d7dde5);border-radius:var(--tmc-radius-md,6px);color:var(--tmc-input-text,var(--tmc-input-auto-text,var(--tmc-color-on-surface-raised,#151821)));font:inherit;outline:0;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;width:100%}.inputSurface::placeholder{color:var(--tmc-input-placeholder-text,var(--tmc-input-auto-text,var(--tmc-color-text-muted,#5f6b7a)));opacity:.72}.inputSurface:focus{border-color:var(--tmc-color-accent,#2454d6);box-shadow:0 0 0 3px color-mix(in srgb,var(--tmc-color-accent,#2454d6) 24%,transparent)}.inputSurface:disabled{cursor:not-allowed;opacity:.58}.inputSurface[aria-invalid=true]{border-color:var(--tmc-color-danger,#b42318)}.input{min-height:2.6rem;padding:0 .85rem}.textarea{line-height:1.5;max-height:var(--tmc-textarea-max-height,18rem);min-height:7rem;overflow:auto;padding:.75rem .85rem;resize:vertical}

package/dist/components/text-input/contrast.client.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from "react";
+export declare function useContrastedFieldStyle<T extends HTMLElement>(style?: CSSProperties): {
+    ref: import("react").RefObject<T | null>;
+    style: CSSProperties;
+};
+export declare function useContrastedInputStyle<T extends HTMLElement>(style?: CSSProperties): {
+    ref: import("react").RefObject<T | null>;
+    style: CSSProperties;
+};