@kyzarky/ui 0.2.0 → 0.3.0

package/README.md

@@ -101,6 +101,36 @@ import { List, ListRow, Meter } from "@kyzarky/ui";
 - **`Meter`** is a bar for a `value` from 0 to 1. It's hidden from screen readers, so
   state the value in the row's `detail`.
 
+```tsx
+import { Button, Card, SegmentedControl } from "@kyzarky/ui";
+
+<Card aria-labelledby="progress-heading" className="flex flex-col gap-4">
+  <SegmentedControl
+    label="Show"
+    value={view}
+    onChange={setView}
+    options={[
+      { value: "now", label: "Now" },
+      { value: "over-time", label: "Over time" },
+    ]}
+  />
+  <Button type="submit">Check my answer</Button>
+  <Button variant="outline" onClick={next}>Next situation</Button>
+</Card>
+```
+
+- **`Card`** is a raised surface, rendered as a `<section>`. Name it with
+  `aria-labelledby` or `aria-label`.
+- **`Button`** takes shadcn/ui's props: `variant` is `default` (filled), `outline`, or
+  `ghost`, and `size` is `default` or `icon`. Unlike a bare `<button>`, its `type` is
+  `button` unless you pass `submit`. It also takes every native button prop.
+- **`SegmentedControl`** picks one option from a few. It's a group of radio buttons
+  underneath, so arrow keys move between options. `label` names the group for screen
+  readers and isn't shown.
+
+`Card` and `Button` take a `className` for layout only (`flex-1`, `w-full`, a `gap`). It's
+added after the component's own classes, not merged with them, so don't use it to restyle.
+
 ## Rules
 
 - **Less space inside a group than between groups,** at least 1:2.

package/dist/Button.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+declare const VARIANTS: {
+    /** Filled with the brand color: the main action. */
+    default: string;
+    /** An edge and the card color: a second action beside a filled one. */
+    outline: string;
+    /** Nothing until hovered: a quiet action, such as an icon in a toolbar. */
+    ghost: string;
+};
+declare const SIZES: {
+    default: string;
+    /** Square, for a single icon. Give the button an aria-label. */
+    icon: string;
+};
+interface ButtonProps extends ComponentProps<"button"> {
+    variant?: keyof typeof VARIANTS;
+    size?: keyof typeof SIZES;
+}
+export declare function Button({ variant, size, type, className, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/Button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClasses } from "./joinClasses.js";
+const VARIANTS = {
+    /** Filled with the brand color: the main action. */
+    default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+    /** An edge and the card color: a second action beside a filled one. */
+    outline: "border border-input bg-card hover:bg-muted active:bg-muted",
+    /** Nothing until hovered: a quiet action, such as an icon in a toolbar. */
+    ghost: "hover:bg-muted active:bg-muted",
+};
+const SIZES = {
+    default: "px-5",
+    /** Square, for a single icon. Give the button an aria-label. */
+    icon: "w-11",
+};
+export function Button({ variant = "default", size = "default", 
+// A bare <button> inside a form submits it. Submitting should be asked for.
+type = "button", className, ...props }) {
+    return (_jsx("button", { type: type, className: joinClasses("inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50", VARIANTS[variant], SIZES[size], className), ...props }));
+}

package/dist/Card.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from "react";
+export declare function Card({ className, ...props }: ComponentProps<"section">): import("react").JSX.Element;

package/dist/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClasses } from "./joinClasses.js";
+export function Card({ className, ...props }) {
+    return (_jsx("section", { className: joinClasses("rounded-2xl border border-border bg-card p-5 text-card-foreground shadow-sm", className), ...props }));
+}

package/dist/SegmentedControl.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+interface SegmentedControlProps<Value extends string> {
+    /** What the choice is, for screen readers: "Show", "Sort by". Not displayed. */
+    label: string;
+    options: readonly {
+        value: Value;
+        label: ReactNode;
+    }[];
+    value: Value;
+    onChange: (value: Value) => void;
+}
+export declare function SegmentedControl<Value extends string>({ label, options, value, onChange, }: SegmentedControlProps<Value>): import("react").JSX.Element;
+export {};

package/dist/SegmentedControl.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A choice of one option from a few, shown side by side. Underneath it's a group of radio
+// buttons, so arrow keys move between options and a screen reader says how many there
+// are, with no key handling written here. The selected look comes from CSS :has(:checked).
+import { useId } from "react";
+export function SegmentedControl({ label, options, value, onChange, }) {
+    // Radio buttons form one group by sharing a name.
+    const name = useId();
+    return (_jsxs("fieldset", { className: "flex rounded-full bg-muted p-1 text-sm", children: [_jsx("legend", { className: "sr-only", children: label }), options.map((option) => (_jsxs("label", { className: "flex min-h-11 cursor-pointer items-center rounded-full px-4 text-muted-foreground has-checked:bg-card has-checked:font-medium has-checked:text-foreground has-checked:shadow-sm has-focus-visible:outline-2 has-focus-visible:outline-ring has-focus-visible:outline-offset-2", children: [_jsx("input", { type: "radio", className: "sr-only", name: name, value: option.value, checked: option.value === value, onChange: () => onChange(option.value) }), option.label] }, option.value)))] }));
+}

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+export { Button } from "./Button.js";
+export { Card } from "./Card.js";
 export { List } from "./List.js";
 export { ListRow } from "./ListRow.js";
 export { Meter } from "./Meter.js";
+export { SegmentedControl } from "./SegmentedControl.js";

package/dist/index.js

@@ -1,4 +1,7 @@
 // The package's components. The tokens they use come from theme.css.
+export { Button } from "./Button.js";
+export { Card } from "./Card.js";
 export { List } from "./List.js";
 export { ListRow } from "./ListRow.js";
 export { Meter } from "./Meter.js";
+export { SegmentedControl } from "./SegmentedControl.js";

package/dist/joinClasses.d.ts

@@ -0,0 +1 @@
+export declare function joinClasses(...names: (string | undefined)[]): string;

package/dist/joinClasses.js

@@ -0,0 +1,6 @@
+// Joins class names, skipping any that aren't set. It doesn't resolve conflicts: a
+// component's `className` prop is for layout (flex-1, w-full, a margin), which the
+// component's own classes never set.
+export function joinClasses(...names) {
+    return names.filter(Boolean).join(" ");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyzarky/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Design tokens and React components for Ky Merritt's apps, built on Tailwind CSS 4",
   "license": "MIT",
   "author": "Ky Merritt",