@stamcat/craftsman 0.0.27-alpha.15 → 0.0.27-alpha.17

package/AGENTS.md

@@ -2,14 +2,18 @@
 
 This document explains how code-generation agents should use this library safely and correctly.
 
-## What This Package Currently Exports
+Full guidance has been split out for progressive loading:
 
-The package is currently built with component-level entry points only.
+- **Global guidelines** (exports, hard rules, code block rendering, style utilities, theme authoring, `isEmpty`, code gen patterns, fallback strategy): see the [craftsman-component-usage skill](.github/skills/craftsman-component-usage/SKILL.md).
+- **Component-specific guidelines** (props, behavior notes, examples): each component has its own `AGENTS.md` co-located with its source, for example [src/components/Button/AGENTS.md](src/components/Button/AGENTS.md).
+
+## Quick Reference
 
 Use these imports:
 
 ```tsx
 import { Button } from "@stamcat/craftsman/Button";
+import { Carousel } from "@stamcat/craftsman/Carousel";
 import { Checkbox } from "@stamcat/craftsman/Checkbox";
 import { DatePicker } from "@stamcat/craftsman/DatePicker";
 import { Input } from "@stamcat/craftsman/Input";
@@ -17,10 +21,12 @@ import { InputPassword } from "@stamcat/craftsman/InputPassword";
 import { InputPhone } from "@stamcat/craftsman/InputPhone";
 import { Loader } from "@stamcat/craftsman/Loader";
 import { Modal } from "@stamcat/craftsman/Modal";
+import { Pagination } from "@stamcat/craftsman/Pagination";
 import { RadioButton } from "@stamcat/craftsman/RadioButton";
 import { Select } from "@stamcat/craftsman/Select";
 import { Text } from "@stamcat/craftsman/Text";
 import { Textarea } from "@stamcat/craftsman/Textarea";
+import { TimePicker } from "@stamcat/craftsman/TimePicker";
 ```
 
 Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.
@@ -32,736 +38,4 @@ Do not assume a root export like `@stamcat/craftsman` unless that export is expl
 3. Do not import storybook files or internal style utilities from consuming applications.
 4. Prefer standard React props first; use custom props only when required.
 
-## Code Block Rendering
-
-Craftsman's global styles automatically style `<code>` and `<code><pre>` elements. **Never create custom inline styles or wrapper divs to simulate a code block.** Use the native elements directly:
-
-```tsx
-// Inline code — renders with pill/badge style
-<code>someValue</code>
-
-// Block code — renders with dark background, padding, and border-radius
-<code><pre>{`your
-multiline
-code here`}</pre></code>
-```
-
-The two modes are driven by `_code.scss`:
-- `<code>` alone → light gray background, inline display
-- `<code>` containing `<pre>` → dark background (`--gray800`), block display, padded and rounded
-
-Do not create `preStyle`, `codeBlockStyle`, or equivalent inline style objects for this purpose. The global styles handle it.
-
-## Style Utilities
-
-Craftsman provides TypeScript helpers and matching Sass functions for color, spacing, and breakpoints. Always use these instead of hard-coded values so theming and overrides work correctly.
-
-### color()
-
-**TypeScript** — import from `@stamcat/craftsman/styles`:
-
-```ts
-import { color, colors, hexToRgba } from "@stamcat/craftsman/styles";
-
-// Returns var(--blue500)
-color("blue500")
-
-// Returns rgb(from var(--blue500) r g b / 0.5)
-color("blue500", "rgba", 0.5)
-
-// Fallback for environments that don't support CSS relative color syntax
-hexToRgba(colors.blue500, 0.5)
-```
-
-**Sass** — import `functions` as `u`:
-
-```scss
-@use "@stamcat/craftsman/styles/utilities/functions" as u;
-
-.element {
-  color:      #{u.color(blue500)};
-  background: #{u.color(black, rgba, 0.4)};
-}
-```
-
-- `color(name)` → `var(--name)` — always prefer this over hard-coded hex values so theme overrides apply.
-- `color(name, rgba, alpha)` → `rgb(from var(--name) r g b / alpha)` — uses CSS relative color syntax; verify browser support for your target.
-- Never hard-code hex color values. Always use `color()` or a CSS variable.
-
-### width()
-
-**TypeScript** — import from `@stamcat/craftsman/styles`:
-
-```ts
-import { width } from "@stamcat/craftsman/styles";
-
-width("gutter")        // var(--w-gutter, 16px)
-width("gutter", 0.5)   // calc(var(--w-gutter, 16px) * 0.5)
-width("column", 3)     // calc((var(--w-column) * 3) + (var(--w-gutter) * 2))
-```
-
-**Sass** — import `functions` as `u`:
-
-```scss
-@use "@stamcat/craftsman/styles/utilities/functions" as u;
-
-.card {
-  padding:   #{u.width(gutter)};
-  gap:       #{u.width(gutter, 0.5)};
-  max-width: #{u.width(column, 4)};
-}
-```
-
-Valid keys: `text` · `gutter` · `column` · `tablet` · `desktop` · `extDesktop` · `mobileMax` · `tabletMax` · `desktopMax`
-
-- The `column` key automatically accounts for gutters between columns.
-- Never use hard-coded `px` values for spacing or layout widths. Always use `width()`.
-
-### breakpoint()
-
-**TypeScript** — returns a full `@media` rule string for CSS-in-JS:
-
-```ts
-import { breakpoint, media } from "@stamcat/craftsman/styles";
-
-// Full rule — use inside styled-components, emotion, or style injection
-breakpoint("desktop", "font-size: 18px;")
-// => "@media (min-width: 1040px) { font-size: 18px; }"
-
-// Raw query string only — use for conditional logic or matchMedia
-media.tablet  // => "(min-width: 660px)"
-```
-
-**Sass** — `@include breakpoint(key)` wraps content in the correct `@media` query:
-
-```scss
-@use "@stamcat/craftsman/styles/utilities/functions" as u;
-
-.sidebar {
-  display: none;
-
-  @include u.breakpoint(tablet) {
-    display: block;
-  }
-}
-```
-
-Available breakpoint keys: `tablet` · `tabletMax` · `tabletOnly` · `desktop` · `desktopMax` · `desktopOnly` · `extDesktop` · `mobileMax` · `mobileOnly` · `mobileTablet`
-
-- Breakpoint values come from `_config.scss` and stay in sync with any project overrides.
-- Never hard-code `@media (min-width: 1040px)` or similar — always use `breakpoint()` so values stay consistent with config.
-
-## Component Contracts
-
-### Button
-
-Import:
-
-```tsx
-import { Button } from "@stamcat/craftsman/Button";
-```
-
-Props:
-
-- Inherits all native `<button>` props.
-- `variant?: "primary" | "default" | "text"` (default: `"default"`)
-- `size?: number` (default visual scale is `1`)
-- `styles?: React.CSSProperties` (inline style override)
-
-Behavior notes:
-
-- `type` defaults to `"button"`.
-- For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
-- `className` is preserved and merged after component classes.
-- Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
-- If `children` is empty (per `isEmpty`), the component renders nothing.
-- `size` is clamped to `[0.1, 10]` before styling is applied.
-- When `size` is provided, Button scales:
-  - `border-radius: calc(var(--btn-border-radius) * size)`
-  - `padding: calc(var(--btn-pad-y) * size) calc(var(--btn-pad-x) * size)`
-  - `font-size: max(10px, calc(var(--w-text) * size))`
-- There is no dedicated icon/loading prop. Icons, loaders, and mixed content are passed as `children`.
-- Supports both real disable (`disabled={true}`) and style-only disable (`className="disabled"`).
-- Native button modes are supported (`type="button" | "submit" | "reset"`).
-- Accessibility props such as `aria-label` pass through unchanged.
-
-Example:
-
-```tsx
-<Button variant="primary" onClick={onSave}>Save</Button>
-```
-
-Story-aligned usage examples:
-
-```tsx
-// Scaled compact button (size is clamped to [0.1, 10])
-<Button variant="primary" size={0.5}>Mini Action</Button>
-
-// Icon content
-<Button variant="primary">
-  <TruckIcon size={20} /> <span>Ship</span>
-</Button>
-
-// Loading content
-<Button aria-label="Saving">
-  <Loader type="boxy" width={32} color="#de13ca" />
-</Button>
-
-// Style-only disabled appearance while still allowing click handlers
-<Button className="disabled" onClick={onClick}>Disabled Look</Button>
-
-// Native submit behavior
-<Button type="submit" aria-label="Save form">Save</Button>
-```
-
-Implementation caution:
-
-- Size scaling depends on CSS variables provided by the package global styles (`--btn-border-radius`, `--btn-pad-y`, `--btn-pad-x`, `--w-text`).
-
-### Input
-
-Import:
-
-```tsx
-import { Input } from "@stamcat/craftsman/Input";
-```
-
-Props:
-
-- Inherits native `<input>` props.
-- `label?: string | ReactNode`
-- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
-- `error?: string | boolean | ReactNode`
-- `required?: boolean`
-- `styles?: React.CSSProperties` (wrapper override)
-- `type?: TextInputType` (checkbox/radio excluded)
-
-Behavior notes:
-
-- `id` is preserved; if omitted, a stable React `useId` value is used.
-- Floating-label behavior is supported when `labelPosition="inside"`.
-- `endAdornment` exists as an internal extension point used by `InputPassword`; consumer apps should prefer `InputPassword` rather than wiring password toggles on `Input`.
-
-Example:
-
-```tsx
-<Input type="email" placeholder="you@company.com" required />
-```
-
-### InputPassword
-
-Import:
-
-```tsx
-import { InputPassword } from "@stamcat/craftsman/InputPassword";
-```
-
-Props:
-
-- Extends `Input` props, with `type` constrained to password mode.
-- Includes all label, error, required, and wrapper style props from `Input`.
-
-Behavior notes:
-
-- Built on top of `Input` and adds an internal password visibility state.
-- Renders an in-field show/hide toggle button.
-- Toggle is accessible: real button element, keyboard operable, and updates `aria-label` + `aria-pressed`.
-- Use this component for password fields instead of `Input type="password"`.
-
-Example:
-
-```tsx
-<InputPassword
-  label="Password"
-  placeholder="Enter your password"
-  autoComplete="current-password"
-/>
-```
-
-### Checkbox
-
-Import:
-
-```tsx
-import { Checkbox } from "@stamcat/craftsman/Checkbox";
-```
-
-Props:
-
-- Extends `Input` props.
-- `type?: "checkbox"` (default: `"checkbox"`)
-- `labelPosition?: "left" | "right" | "top" | "bottom"` (default: `"right"`)
-
-Behavior notes:
-
-- `Checkbox` is a thin wrapper around `Input` with checkbox-specific guardrails.
-- The wrapper enforces checkbox type by default and narrows label position options to common checkbox layouts.
-- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
-
-Example:
-
-```tsx
-<Checkbox
-  id="accept-terms"
-  name="terms"
-  value="accepted"
-  label="Accept terms"
-  checked={accepted}
-  onChange={(event) => setAccepted(event.currentTarget.checked)}
-/>
-```
-
-### RadioButton
-
-Import:
-
-```tsx
-import { RadioButton } from "@stamcat/craftsman/RadioButton";
-```
-
-Props:
-
-- Extends `Input` props.
-- `type?: "radio"` (default: `"radio"`)
-- `labelPosition?: "left" | "right"` (default: `"right"`)
-
-Behavior notes:
-
-- `RadioButton` is a thin wrapper around `Input` with radio-specific guardrails.
-- Group behavior is native HTML radio behavior: use a shared `name` across options.
-- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
-
-Example:
-
-```tsx
-<>
-  <RadioButton
-    id="captain-kirk"
-    name="favorite-captain"
-    value="Kirk"
-    label="James T. Kirk"
-    checked={selected === "Kirk"}
-    onChange={(event) => setSelected(event.currentTarget.value)}
-  />
-  <RadioButton
-    id="captain-picard"
-    name="favorite-captain"
-    value="Picard"
-    label="Jean-Luc Picard"
-    checked={selected === "Picard"}
-    onChange={(event) => setSelected(event.currentTarget.value)}
-  />
-</>
-```
-
-### Modal
-
-Import:
-
-```tsx
-import { Modal } from "@stamcat/craftsman/Modal";
-```
-
-Props:
-
-- Inherits all native `<div>` props.
-- `visible?: boolean` (when falsy, component renders nothing)
-- `onDismiss?: () => void`
-- `type?: "dialog" | "panel"` (default: `"dialog"`)
-- `header?: string | React.ReactNode`
-- `backgroundDismiss?: boolean` (default behavior: `true`)
-- `hideDismissIcon?: boolean` (default behavior: close icon is shown)
-- `footer?: React.ReactNode`
-- `styles?: React.CSSProperties` (applies to outer modal wrapper)
-
-Behavior notes:
-
-- Modal is controlled; parent owns open/close state via `visible` and `onDismiss`.
-- Close icon and background click both dismiss through `onDismiss`.
-- Background dismiss only runs when `backgroundDismiss` is `true` or `undefined`.
-- Dismiss uses a short close animation before calling `onDismiss` (~280ms timeout).
-- `type="dialog"` renders centered responsive dialog sizing; `type="panel"` renders a right-side panel.
-- `footer` is rendered in an action row container below modal content.
-
-Example:
-
-```tsx
-const [open, setOpen] = useState(false);
-
-<>
-  <Button variant="primary" onClick={() => setOpen(true)}>Open</Button>
-  <Modal
-    visible={open}
-    onDismiss={() => setOpen(false)}
-    type="dialog"
-    header="Confirm Action"
-    footer={<><Button onClick={() => setOpen(false)}>Cancel</Button><Button variant="primary">Confirm</Button></>}
-  >
-    <p>Are you sure?</p>
-  </Modal>
-</>
-```
-
-### Loader
-
-Import:
-
-```tsx
-import { Loader } from "@stamcat/craftsman/Loader";
-```
-
-Props:
-
-- Inherits all native `<div>` props.
-- `type` is required and must be one of:
-  - `"dots"`
-  - `"dots-trace"`
-  - `"dots-bounce"`
-  - `"dots-orbit"`
-  - `"dashes"`
-  - `"spinner"`
-  - `"swirl"`
-  - `"ball"`
-  - `"boxy"`
-  - `"factory"`
-- `color?: string` (default: `"black"`)
-- `width?: number` (optional, variant-dependent default behavior)
-- `styles?: React.CSSProperties` (inline style override)
-
-Example:
-
-```tsx
-<Loader type="spinner" color="var(--blue500)" width={40} aria-label="Loading" />
-```
-
-### Textarea
-
-Import:
-
-```tsx
-import { Textarea } from "@stamcat/craftsman/Textarea";
-```
-
-Props:
-
-- Inherits all native `<textarea>` props.
-- `label?: string | ReactNode`
-- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
-- `error?: string | boolean | ReactNode`
-- `required?: boolean`
-- `rows?: number`
-
-Behavior notes:
-
-- Shares the same `InputWrapper` as `Input` — label, error, and required behavior is identical.
-- `id` is auto-generated via `useId` if not provided.
-
-Example:
-
-```tsx
-<Textarea
-  label="Your Message"
-  placeholder="Type here"
-  rows={4}
-  required
-/>
-```
-
-### Select
-
-Import:
-
-```tsx
-import { Select } from "@stamcat/craftsman/Select";
-```
-
-Props:
-
-- Inherits all native `<select>` props.
-- `label?: string | ReactNode`
-- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
-- `error?: string | boolean | ReactNode`
-- `required?: boolean`
-- `options?: Array<{ label: string; value: string }>`
-
-Behavior notes:
-
-- Built on the native `<select>` element via `InputWrapper`.
-- Pass options as a plain array — do not render `<option>` children manually.
-- `id` is auto-generated via `useId` if not provided.
-
-Example:
-
-```tsx
-<Select
-  label="Favorite Fruit"
-  required
-  options={[
-    { value: "", label: "Select one..." },
-    { value: "apple", label: "Apple" },
-    { value: "banana", label: "Banana" },
-  ]}
-/>
-```
-
-### InputPhone
-
-Import:
-
-```tsx
-import { InputPhone } from "@stamcat/craftsman/InputPhone";
-```
-
-Props:
-
-- Extends `PhoneInputProps` from `react-international-phone`.
-- `label?: string | ReactNode`
-- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
-- `error?: string | boolean | ReactNode`
-- `required?: boolean`
-- `defaultCountry?: string` (default: `"us"`)
-- `preferredCountries?: string[]`
-- `endAdornment?: ReactNode`
-
-Behavior notes:
-
-- Powered by `react-international-phone` for i18n-aware phone number formatting.
-- Country selector dropdown opens below the field; ensure the container has at least 350px of vertical space.
-- Use `preferredCountries` to surface commonly used countries at the top of the dropdown.
-
-Example:
-
-```tsx
-<InputPhone
-  label="Phone Number"
-  defaultCountry="us"
-  preferredCountries={["us", "gb", "ca"]}
-  required
-/>
-```
-
-### DatePicker
-
-Import:
-
-```tsx
-import { DatePicker } from "@stamcat/craftsman/DatePicker";
-```
-
-Props:
-
-- Extends `DatePickerProps` from `react-date-picker`.
-- `label?: string | ReactNode`
-- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
-- `error?: string | boolean | ReactNode`
-- `required?: boolean`
-- `value?: Date | null`
-- `onChange?: (value: DatePickerProps["value"]) => void`
-
-Behavior notes:
-
-- Controlled component — parent owns `value` and `onChange`.
-- Calendar flyout renders below the input; ensure the container has at least 400px of vertical space.
-- Use `useState` to manage the selected date value.
-
-Example:
-
-```tsx
-const [date, setDate] = useState<Date | null>(null);
-
-<DatePicker
-  label="Appointment Date"
-  value={date}
-  onChange={setDate}
-  required
-/>
-```
-
-### Text
-
-Import:
-
-```tsx
-import { Text } from "@stamcat/craftsman/Text";
-```
-
-Props:
-
-- Inherits all native HTML element props.
-- `as?: TextTags` — HTML tag to render (default: `"div"`)
-- `richText?: boolean` — when `true`, renders sanitized HTML from a string `children` value (always renders as `<div>`)
-- `type?: TextType` — overrides base type styling (e.g. `"display"`, `"heading"`)
-- `size?: TextSize` — overrides base size styling
-- `alignment?: "center" | "left" | "right"` — legacy text-align shorthand
-
-Behavior notes:
-
-- Uses global HTML5 tag declarations by default; `type` and `size` override base styling.
-- `richText` mode sanitizes HTML via DOMPurify. Always pass a string as `children` in this mode.
-- Prefer semantic HTML5 tags via `as` over using `type`/`size` overrides.
-
-Example:
-
-```tsx
-// Semantic heading
-<Text as="h2">Section Title</Text>
-
-// Sanitized rich text from a CMS
-<Text richText>{'<p><strong>Hello</strong> world</p>'}</Text>
-```
-
-### Toast (react-toastify)
-
-Craftsman re-exports `toast` and `ToastContainer` from `react-toastify`. No custom wrapper is needed.
-
-Import:
-
-```tsx
-import { toast, ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-```
-
-Usage:
-
-- Render one `<ToastContainer>` near the root of your app.
-- Call `toast(...)` anywhere in response to user actions.
-- `ToastContainer` props: `position`, `autoClose`, `theme` (`"light" | "dark" | "colored"`), `closeOnClick`, `pauseOnHover`, `draggable`, `newestOnTop`.
-
-Example:
-
-```tsx
-// Root layout
-<ToastContainer position="bottom-right" autoClose={3000} theme="light" />
-
-// Anywhere in the app
-toast("Saved successfully!");
-toast.error("Something went wrong.");
-toast.success("Profile updated.");
-toast.warning("Unsaved changes.");
-toast.info("New version available.");
-```
-
-## Styling Expectations
-
-- Components are built with SCSS modules and class-based variant hooks.
-- If your app does not include this package's global CSS variable setup, visual output may differ.
-- Agents should avoid hard-coding assumptions about token names beyond what the consumer app already defines.
-
-## Theme Authoring
-
-- `theme.root` supports JS style objects and raw CSS/Sass strings.
-- `theme.components.*` supports JS style objects and raw CSS/Sass strings.
-- `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
-- String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
-- For multi-file Sass workflows with syntax highlighting and mixins, import compiled CSS text via `*.scss?inline`.
-
-Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop" | "extDesktop" | "mobileMax" | "tabletMax" | "desktopMax"`
-
-Example:
-
-```tsx
-import greenRoot from "./green.root.scss?inline";
-import greenButton from "./green.button.scss?inline";
-
-export const theme = {
-  widths: {
-    gutter: 20,
-    tablet: 768,
-  },
-  root: greenRoot,
-  components: {
-    button: greenButton,
-  },
-};
-```
-
-## Utility Functions
-
-### `isEmpty`
-
-The package exports an `isEmpty` utility. **Always use it instead of writing inline empty checks.**
-
-Import:
-
-```ts
-import { isEmpty } from "@stamcat/craftsman/utilities/validations";
-```
-
-It returns `true` for:
-
-- `undefined`
-- `null`
-- empty objects — `{}`
-- strings that are empty or whitespace-only — `""`, `" "`
-- arrays with no elements — `[]`
-
-Examples:
-
-```ts
-// DO — use isEmpty
-if (isEmpty(value)) { ... }
-if (!isEmpty(items)) { ... }
-
-// DO NOT — write these manually
-if (value === undefined || value === null) { ... }
-if (typeof value === "string" && value.trim().length === 0) { ... }
-if (Object.keys(obj).length === 0) { ... }
-if (arr.length === 0) { ... }
-```
-
-### Style utilities parity (`color`, `width`, `breakpoint`)
-
-These utility patterns exist in both TypeScript and Sass.
-
-TypeScript usage:
-
-```ts
-import { color, width, breakpoint } from "@stamcat/craftsman/styles";
-
-const accent = color("blue500");
-const alphaAccent = color("blue500", "rgba", 0.32);
-const twoColumns = width("column", 2);
-const mobileRule = breakpoint("mobileMax", "h4{font-size:14px;}");
-```
-
-Sass usage (framework source):
-
-```scss
-@use "./src/styles/utilities" as u;
-
-.example {
-  color: #{u.color(blue500)};
-  background: #{u.color(blue500, rgba, 0.32)};
-  max-width: #{u.width(column, 2)};
-}
-
-@include u.breakpoint(mobileMax) {
-  .example { font-size: #{u.width(text)}; }
-}
-```
-
-## Code Generation Patterns to Prefer
-
-1. Generate fully typed React usage examples.
-2. Keep accessibility props in place (`aria-label`, `disabled`, semantic `type`).
-3. Use `variant="primary"` for main actions and `variant="text"` for low-emphasis actions.
-4. For loading states, pair `Loader` with accessible status text where needed.
-5. **Functional component declaration order** — always organize the body in this sequence:
-   1. Hook calls (`useSomething`)
-   2. State (`useState`)
-   3. Derived state / variables (values computed from state or props)
-   4. Action handlers (`const handle*`, `const dispatch*`, `useEffect`)
-
-## Known Limitations (Current Package State)
-
-1. README is minimal; treat this guide as the source of truth for agent usage.
-2. Theme utilities exist in source but are not guaranteed public package exports.
-3. `Progress` exists in source but is incomplete and intentionally omitted from this guide for now.
-
-## Safe Fallback Strategy for Agents
-
-If uncertain about available exports:
 
-1. Use only `Button`, `Checkbox`, `DatePicker`, `Input`, `InputPassword`, `InputPhone`, `Loader`, `Modal`, `RadioButton`, `Select`, `Text`, and `Textarea` from their component entry points.
-2. Do not invent package APIs.
-3. Prefer native HTML elements for anything not explicitly exported.