@inshorts/glint-ui 0.5.4 → 0.6.0

package/dist/segmented-control.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+/**
+ * The one-of-N picker seven panels were each drawing by hand.
+ *
+ * Not `Tabs`, which is a bottom-bordered strip sitting above the content it
+ * switches. This is the inline version — a bordered track with the selected
+ * option filled in — used for a filter or a setting that sits among other
+ * controls rather than heading a panel.
+ *
+ * **Roles are the reason to use this.** The seven copies had three different
+ * ideas about what they were: one said `tablist`/`tab`, one said
+ * `group`/`aria-pressed`, and the other five said nothing at all — so on five
+ * of seven a screen reader heard a row of unlabelled buttons with no
+ * indication which one was active. None of the three was right. `tablist`
+ * without a `tabpanel` is a promise the markup does not keep, and
+ * `aria-pressed` describes independent toggles, not a choice of one. Picking a
+ * value out of a fixed set is a radio group, so that is what this is, with the
+ * roving tabindex and arrow keys that come with the role.
+ *
+ * `tone` keeps both active colours the panels had drifted into: `emphasis` is
+ * the near-black/near-white fill five of them used, `primary` the violet
+ * accent the other two did. They are genuinely different colours rather than
+ * one spelled two ways, so collapsing them is a visual change to two panels
+ * and belongs in its own reviewable diff — the same call `DataTable` makes
+ * about its two header variants.
+ */
+interface SegmentedOption<Value extends string> {
+    value: Value;
+    label: React.ReactNode;
+    disabled?: boolean;
+    /**
+     * Hover text. Worth setting on a disabled option — "Everyone" going grey
+     * says nothing about which permission would bring it back.
+     */
+    title?: string;
+}
+interface SegmentedControlProps<Value extends string> {
+    options: ReadonlyArray<SegmentedOption<Value>>;
+    value: Value;
+    onChange: (value: Value) => void;
+    /**
+     * Required: the group never has a visible label — the options name the
+     * choice between them, which tells you nothing about what is being chosen.
+     */
+    ariaLabel: string;
+    /**
+     * `contained` — one bordered track around the options (five panels).
+     * `loose` — free-standing pills with a gap between them (two panels).
+     */
+    variant?: "contained" | "loose";
+    /** See the note above: two real colours, not one spelled twice. */
+    tone?: "emphasis" | "primary";
+    /** Options share the width equally, for a control that fills its column. */
+    fill?: boolean;
+    className?: string;
+}
+declare function SegmentedControl<Value extends string>({ options, value, onChange, ariaLabel, variant, tone, fill, className, }: SegmentedControlProps<Value>): React.JSX.Element;
+
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption };

package/dist/segmented-control.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  SegmentedControl
+} from "./chunk-ASU6CUTZ.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}