@krizaka/ui 3.1.0 → 3.3.0

package/registry/examples/radio-group/segmented.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/radio-group/segmented.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/radio-group/segmented.tsx
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioGroupSegmented() {
+  return /* @__PURE__ */ jsxs(RadioGroup.Root, { label: "Billing", defaultValue: "yearly", variant: "segmented", children: [
+    /* @__PURE__ */ jsx(RadioGroup.Segment, { value: "monthly", children: "Monthly" }),
+    /* @__PURE__ */ jsx(RadioGroup.Segment, { value: "yearly", children: "Yearly" }),
+    /* @__PURE__ */ jsx(RadioGroup.Segment, { value: "lifetime", children: "Lifetime" })
+  ] });
+}
+export {
+  RadioGroupSegmented as default
+};

package/registry/examples/radio-group/segmented.tsx

@@ -0,0 +1,12 @@
+import { RadioGroup } from "@krizaka/ui/radio-group";
+
+// A segmented control that is a choice (a form's value), not a view switch: one light glides to the chosen segment.
+export default function RadioGroupSegmented() {
+  return (
+    <RadioGroup.Root label="Billing" defaultValue="yearly" variant="segmented">
+      <RadioGroup.Segment value="monthly">Monthly</RadioGroup.Segment>
+      <RadioGroup.Segment value="yearly">Yearly</RadioGroup.Segment>
+      <RadioGroup.Segment value="lifetime">Lifetime</RadioGroup.Segment>
+    </RadioGroup.Root>
+  );
+}

package/registry/examples/slider/floating.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/floating.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/slider/floating.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderFloating() {
+  return /* @__PURE__ */ jsx("div", { className: "pt-10", children: /* @__PURE__ */ jsx(Slider, { label: "Creator's share", size: "lg", defaultValue: 70, step: 5, floatingValue: "always", formatValue: (v) => `${v} %` }) });
+}
+export {
+  SliderFloating as default
+};

package/registry/examples/slider/floating.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// The value floats over the thumb while it is touched (`"always"` here, to be seen at rest); a thicker track.
+export default function SliderFloating() {
+  return (
+    <div className="pt-10">
+      <Slider label="Creator's share" size="lg" defaultValue={70} step={5} floatingValue="always" formatValue={(v) => `${v} %`} />
+    </div>
+  );
+}

package/registry/examples/slider/native/default.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/native/default.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/slider/native/default.tsx
+import { Slider } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSliderDefault() {
+  const [share, setShare] = React.useState(70);
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(Slider, { label: "Creator's share", showLabel: true, floatingValue: true, value: share, onValueChange: setShare, step: 5, formatValue: (v) => `${v} %` }) });
+}
+export {
+  NativeSliderDefault as default
+};

package/registry/examples/slider/native/default.tsx

@@ -0,0 +1,13 @@
+import { Slider } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// One value, its label and value above the track; the value floats over the thumb while it is dragged.
+export default function NativeSliderDefault() {
+  const [share, setShare] = React.useState(70);
+  return (
+    <View style={{ width: 300 }}>
+      <Slider label="Creator's share" showLabel floatingValue value={share} onValueChange={setShare} step={5} formatValue={(v) => `${v} %`} />
+    </View>
+  );
+}

package/registry/examples/slider/native/range.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/native/range.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/slider/native/range.tsx
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSliderRange() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 300, paddingTop: 36 }, children: /* @__PURE__ */ jsx(Slider, { label: "Price", thumbLabels: ["Minimum price", "Maximum price"], defaultValue: [40, 160], max: 250, step: 10, floatingValue: "always", formatValue: (v) => `$${v}` }) });
+}
+export {
+  NativeSliderRange as default
+};

package/registry/examples/slider/native/range.tsx

@@ -0,0 +1,11 @@
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A price range in the brand's gradient: two named thumbs, their values floating.
+export default function NativeSliderRange() {
+  return (
+    <View style={{ width: 300, paddingTop: 36 }}>
+      <Slider<[number, number]> label="Price" thumbLabels={["Minimum price", "Maximum price"]} defaultValue={[40, 160]} max={250} step={10} floatingValue="always" formatValue={(v) => `$${v}`} />
+    </View>
+  );
+}

package/registry/examples/slider/native/stepped.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/native/stepped.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/slider/native/stepped.tsx
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeSliderStepped() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 300 }, children: /* @__PURE__ */ jsx(
+    Slider,
+    {
+      label: "Playback speed",
+      showLabel: true,
+      defaultValue: 1,
+      min: 0.5,
+      max: 2,
+      step: 0.25,
+      ticks: true,
+      marks: [
+        { value: 0.5, label: "0.5\xD7" },
+        { value: 2, label: "2\xD7" }
+      ],
+      formatValue: (v) => `${v}\xD7`
+    }
+  ) });
+}
+export {
+  NativeSliderStepped as default
+};

package/registry/examples/slider/native/stepped.tsx

@@ -0,0 +1,24 @@
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Steps you feel: a graduation at each one, a selection haptic as the thumb passes it, words under the track.
+export default function NativeSliderStepped() {
+  return (
+    <View style={{ width: 300 }}>
+      <Slider
+        label="Playback speed"
+        showLabel
+        defaultValue={1}
+        min={0.5}
+        max={2}
+        step={0.25}
+        ticks
+        marks={[
+          { value: 0.5, label: "0.5×" },
+          { value: 2, label: "2×" },
+        ]}
+        formatValue={(v) => `${v}×`}
+      />
+    </View>
+  );
+}

package/registry/examples/slider/native/vertical.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/native/vertical.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/slider/native/vertical.tsx
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSliderVertical() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 24, height: 180 }, children: [
+    /* @__PURE__ */ jsx(Slider, { label: "Voice", orientation: "vertical", tone: "solid", defaultValue: 70, step: 10, ticks: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Music", orientation: "vertical", tone: "solid", defaultValue: 40, step: 10, ticks: true }),
+    /* @__PURE__ */ jsx(Slider, { label: "Effects", orientation: "vertical", defaultValue: 55, step: 10, ticks: true })
+  ] });
+}
+export {
+  NativeSliderVertical as default
+};

package/registry/examples/slider/native/vertical.tsx

@@ -0,0 +1,13 @@
+import { Slider } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Vertical faders, the accent alone, steps marked.
+export default function NativeSliderVertical() {
+  return (
+    <View style={{ flexDirection: "row", gap: 24, height: 180 }}>
+      <Slider label="Voice" orientation="vertical" tone="solid" defaultValue={70} step={10} ticks />
+      <Slider label="Music" orientation="vertical" tone="solid" defaultValue={40} step={10} ticks />
+      <Slider label="Effects" orientation="vertical" defaultValue={55} step={10} ticks />
+    </View>
+  );
+}

package/registry/examples/slider/price-range.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/price-range.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/slider/price-range.tsx
+import { Slider } from "@krizaka/ui/slider";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function SliderPriceRange() {
+  const [price, setPrice] = React.useState([40, 160]);
+  return /* @__PURE__ */ jsx("div", { className: "pt-10", children: /* @__PURE__ */ jsx(
+    Slider,
+    {
+      label: "Price",
+      thumbLabels: ["Minimum price", "Maximum price"],
+      value: price,
+      onValueChange: setPrice,
+      max: 250,
+      step: 10,
+      floatingValue: "always",
+      marks: [
+        { value: 0, label: "$0" },
+        { value: 250, label: "$250+" }
+      ],
+      formatValue: (v) => `$${v}`
+    }
+  ) });
+}
+export {
+  SliderPriceRange as default
+};

package/registry/examples/slider/price-range.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+import * as React from "react";
+
+// A price range in the brand's gradient: two floating values, the bounds written under the track.
+export default function SliderPriceRange() {
+  const [price, setPrice] = React.useState<[number, number]>([40, 160]);
+  return (
+    <div className="pt-10">
+      <Slider<[number, number]>
+        label="Price"
+        thumbLabels={["Minimum price", "Maximum price"]}
+        value={price}
+        onValueChange={setPrice}
+        max={250}
+        step={10}
+        floatingValue="always"
+        marks={[
+          { value: 0, label: "$0" },
+          { value: 250, label: "$250+" },
+        ]}
+        formatValue={(v) => `$${v}`}
+      />
+    </div>
+  );
+}

package/registry/examples/slider/stepped.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/stepped.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/slider/stepped.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderStepped() {
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      label: "Playback speed",
+      showLabel: true,
+      defaultValue: 1,
+      min: 0.5,
+      max: 2,
+      step: 0.25,
+      ticks: true,
+      marks: [
+        { value: 0.5, label: "0.5\xD7" },
+        { value: 1, label: "1\xD7" },
+        { value: 2, label: "2\xD7" }
+      ],
+      formatValue: (v) => `${v}\xD7`
+    }
+  );
+}
+export {
+  SliderStepped as default
+};

package/registry/examples/slider/stepped.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// Steps you can feel: a graduation at each one, their words under the track.
+export default function SliderStepped() {
+  return (
+    <Slider
+      label="Playback speed"
+      showLabel
+      defaultValue={1}
+      min={0.5}
+      max={2}
+      step={0.25}
+      ticks
+      marks={[
+        { value: 0.5, label: "0.5×" },
+        { value: 1, label: "1×" },
+        { value: 2, label: "2×" },
+      ]}
+      formatValue={(v) => `${v}×`}
+    />
+  );
+}

package/registry/examples/slider/vertical.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/slider/vertical.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/slider/vertical.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SliderVertical() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-48 gap-8", children: [
+    /* @__PURE__ */ jsx(Slider, { label: "Voice", orientation: "vertical", tone: "solid", defaultValue: 70, step: 10, ticks: true, formatValue: (v) => `${v} %` }),
+    /* @__PURE__ */ jsx(Slider, { label: "Music", orientation: "vertical", tone: "solid", defaultValue: 40, step: 10, ticks: true, formatValue: (v) => `${v} %` }),
+    /* @__PURE__ */ jsx(Slider, { label: "Effects", orientation: "vertical", defaultValue: 55, step: 10, ticks: true, formatValue: (v) => `${v} %` })
+  ] });
+}
+export {
+  SliderVertical as default
+};

package/registry/examples/slider/vertical.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// Vertical faders: a mixer's channels, the accent alone, steps marked.
+export default function SliderVertical() {
+  return (
+    <div className="flex h-48 gap-8">
+      <Slider label="Voice" orientation="vertical" tone="solid" defaultValue={70} step={10} ticks formatValue={(v) => `${v} %`} />
+      <Slider label="Music" orientation="vertical" tone="solid" defaultValue={40} step={10} ticks formatValue={(v) => `${v} %`} />
+      <Slider label="Effects" orientation="vertical" defaultValue={55} step={10} ticks formatValue={(v) => `${v} %`} />
+    </div>
+  );
+}

package/registry/examples/switch/native/default.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/switch/native/default.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/switch/native/default.tsx
+import { Switch } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSwitchDefault() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Switch, { label: "Dark mode", defaultChecked: true }),
+    /* @__PURE__ */ jsx(Switch, { label: "Sounds" }),
+    /* @__PURE__ */ jsx(Switch, { label: "Compact", size: "sm", defaultChecked: true })
+  ] });
+}
+export {
+  NativeSwitchDefault as default
+};

package/registry/examples/switch/native/default.tsx

@@ -0,0 +1,13 @@
+import { Switch } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The switch alone, named by `label`: md and sm, on and off.
+export default function NativeSwitchDefault() {
+  return (
+    <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
+      <Switch label="Dark mode" defaultChecked />
+      <Switch label="Sounds" />
+      <Switch label="Compact" size="sm" defaultChecked />
+    </View>
+  );
+}

package/registry/examples/switch/native/settings.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/switch/native/settings.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/switch/native/settings.tsx
+import { Switch } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSwitchSettings() {
+  const [push, setPush] = React.useState(true);
+  const [auctions, setAuctions] = React.useState(true);
+  const [digest, setDigest] = React.useState(false);
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 4 }, children: [
+    /* @__PURE__ */ jsx(Switch, { label: "Push notifications", description: "On this phone, even when the app is closed.", showLabel: true, checked: push, onCheckedChange: setPush }),
+    /* @__PURE__ */ jsx(Switch, { label: "Auctions you follow", description: "Outbid, ending soon, won.", showLabel: true, checked: auctions, onCheckedChange: setAuctions, disabled: !push }),
+    /* @__PURE__ */ jsx(Switch, { label: "Weekly digest", description: "One e-mail on Monday morning.", showLabel: true, checked: digest, onCheckedChange: setDigest })
+  ] });
+}
+export {
+  NativeSwitchSettings as default
+};

package/registry/examples/switch/native/settings.tsx

@@ -0,0 +1,17 @@
+import { Switch } from "@krizaka/ui/native";
+import * as React from "react";
+import { View } from "react-native";
+
+// Notification preferences: settings rows, the whole row pressable, a selection haptic as each one flips.
+export default function NativeSwitchSettings() {
+  const [push, setPush] = React.useState(true);
+  const [auctions, setAuctions] = React.useState(true);
+  const [digest, setDigest] = React.useState(false);
+  return (
+    <View style={{ width: 320, gap: 4 }}>
+      <Switch label="Push notifications" description="On this phone, even when the app is closed." showLabel checked={push} onCheckedChange={setPush} />
+      <Switch label="Auctions you follow" description="Outbid, ending soon, won." showLabel checked={auctions} onCheckedChange={setAuctions} disabled={!push} />
+      <Switch label="Weekly digest" description="One e-mail on Monday morning." showLabel checked={digest} onCheckedChange={setDigest} />
+    </View>
+  );
+}

package/registry/field.json

@@ -133,11 +133,11 @@
   },
   "native": {
     "entry": "@krizaka/ui/native",
-    "import": "import { TextField } from \"@krizaka/ui/native\";",
+    "import": "import { TextField, Select } from \"@krizaka/ui/native\";",
     "differences": [
       "One component, `TextField`: the label, the input, the hint or the error together (no `Field.*` parts, no `htmlFor`).",
       "Every `TextInput` prop passes through (`secureTextEntry`, `keyboardType`, `autoComplete`, `returnKeyType`); `multiline` is the text area; `onValueChange` gives the text.",
-      "`end` holds an adornment (a spinner, a check, a show-password button); `inputRef` focuses the input. No `Select`: a choice is a `Chip.Group` or a screen."
+      "`end` holds an adornment (a spinner, a check, a show-password button); `inputRef` focuses the input. A choice among many is `Select`: a field that opens a `Sheet` of options."
     ],
     "props": [
       {
@@ -229,6 +229,18 @@
           "dark": "examples/field/native/default.dark.png",
           "light": "examples/field/native/default.light.png"
         }
+      },
+      {
+        "name": "select",
+        "title": "Select",
+        "description": "One choice among many: the field opens a sheet of options, picking one closes it.",
+        "path": "examples/field/native/select.tsx",
+        "module": "@krizaka/ui/registry/examples/field/native/select",
+        "code": "import { Select } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\n// One choice among many: the field opens a sheet of options; picking one closes it.\nexport default function NativeFieldSelect() {\n  const [category, setCategory] = React.useState<string | null>(null);\n  return (\n    <View style={{ width: 300 }}>\n      <Select\n        label=\"Category\"\n        placeholder=\"Choose a category\"\n        value={category}\n        onValueChange={setCategory}\n        hint=\"Where your video is listed.\"\n        options={[\n          { value: \"music\", label: \"Music\" },\n          { value: \"sport\", label: \"Sport\", description: \"Training, matches, challenges\" },\n          { value: \"art\", label: \"Art\" },\n          { value: \"talk\", label: \"Talk\" },\n        ]}\n      />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/field/native/select.dark.png",
+          "light": "examples/field/native/select.light.png"
+        }
       }
     ]
   },
@@ -243,7 +255,7 @@
     },
     {
       "path": "field/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Field\",\n  summary: \"A form field: a label, a hint and an error around an `Input`, a `Textarea` or a native `Select`.\",\n  status: \"stable\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"For every text entry of a form: email, title, description, amount.\",\n    \"`Select` for a choice among many options (a country): the platform's own menu, right on phones.\",\n  ],\n  whenNotToUse: [\n    { when: \"To turn a setting on or off.\", use: \"switch\" },\n    { when: \"To choose among two to five options that should all be visible.\", use: \"radio-group\" },\n    { when: \"To pick a number in a range by feel.\", use: \"slider\" },\n  ],\n  bestPractices: [\n    \"Always a visible `Field.Label`: a placeholder is an example, never the label.\",\n    \"Put the hint before the error is possible (“We never share it”), the error after it is: what is wrong and how to fix it.\",\n    \"Use the right `type` (`email`, `url`, `number`) and `autoComplete`: phones show the right keyboard.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Plain HTML wiring: `Field.Label htmlFor` = the control's `id`; hint and error ids in `aria-describedby`.\",\n      \"`invalid` sets `aria-invalid` and `data-invalid` on the control.\",\n      \"A disabled control is skipped by Tab: if the value matters, prefer `readOnly`.\",\n    ],\n  },\n  related: [\"checkbox\", \"switch\", \"radio-group\", \"slider\"],\n  web: {\n    imports: [\"Field\", \"Input\", \"Textarea\", \"Select\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"A label, an input and a hint.\" },\n      { name: \"invalid\", title: \"Invalid\", description: \"`invalid` and its error, read through `aria-describedby`.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not editable.\" },\n      { name: \"textarea\", title: \"Textarea\", description: \"A longer text.\" },\n      { name: \"select\", title: \"Select\", description: \"A native select.\" },\n    ],\n  },\n  native: {\n    imports: [\"TextField\"],\n    differences: [\n      \"One component, `TextField`: the label, the input, the hint or the error together (no `Field.*` parts, no `htmlFor`).\",\n      \"Every `TextInput` prop passes through (`secureTextEntry`, `keyboardType`, `autoComplete`, `returnKeyType`); `multiline` is the text area; `onValueChange` gives the text.\",\n      \"`end` holds an adornment (a spinner, a check, a show-password button); `inputRef` focuses the input. No `Select`: a choice is a `Chip.Group` or a screen.\",\n    ],\n    examples: [\n      { name: \"default\", title: \"Sign-up fields\", description: \"E-mail and password: the right keyboards, autofill, a hint, then an error in place of the hint.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Field\",\n  summary: \"A form field: a label, a hint and an error around an `Input`, a `Textarea` or a native `Select`.\",\n  status: \"stable\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"For every text entry of a form: email, title, description, amount.\",\n    \"`Select` for a choice among many options (a country): the platform's own menu, right on phones.\",\n  ],\n  whenNotToUse: [\n    { when: \"To turn a setting on or off.\", use: \"switch\" },\n    { when: \"To choose among two to five options that should all be visible.\", use: \"radio-group\" },\n    { when: \"To pick a number in a range by feel.\", use: \"slider\" },\n  ],\n  bestPractices: [\n    \"Always a visible `Field.Label`: a placeholder is an example, never the label.\",\n    \"Put the hint before the error is possible (“We never share it”), the error after it is: what is wrong and how to fix it.\",\n    \"Use the right `type` (`email`, `url`, `number`) and `autoComplete`: phones show the right keyboard.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Plain HTML wiring: `Field.Label htmlFor` = the control's `id`; hint and error ids in `aria-describedby`.\",\n      \"`invalid` sets `aria-invalid` and `data-invalid` on the control.\",\n      \"A disabled control is skipped by Tab: if the value matters, prefer `readOnly`.\",\n    ],\n  },\n  related: [\"checkbox\", \"switch\", \"radio-group\", \"slider\"],\n  web: {\n    imports: [\"Field\", \"Input\", \"Textarea\", \"Select\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"A label, an input and a hint.\" },\n      { name: \"invalid\", title: \"Invalid\", description: \"`invalid` and its error, read through `aria-describedby`.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not editable.\" },\n      { name: \"textarea\", title: \"Textarea\", description: \"A longer text.\" },\n      { name: \"select\", title: \"Select\", description: \"A native select.\" },\n    ],\n  },\n  native: {\n    imports: [\"TextField\", \"Select\"],\n    differences: [\n      \"One component, `TextField`: the label, the input, the hint or the error together (no `Field.*` parts, no `htmlFor`).\",\n      \"Every `TextInput` prop passes through (`secureTextEntry`, `keyboardType`, `autoComplete`, `returnKeyType`); `multiline` is the text area; `onValueChange` gives the text.\",\n      \"`end` holds an adornment (a spinner, a check, a show-password button); `inputRef` focuses the input. A choice among many is `Select`: a field that opens a `Sheet` of options.\",\n    ],\n    examples: [\n      { name: \"default\", title: \"Sign-up fields\", description: \"E-mail and password: the right keyboards, autofill, a hint, then an error in place of the hint.\" },\n      { name: \"select\", title: \"Select\", description: \"One choice among many: the field opens a sheet of options, picking one closes it.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",