@charcuterie/ui 3.33.0 → 3.34.0

package/src/sliderStyles.ts

@@ -0,0 +1,69 @@
+/**
+ * The paint `Slider` and `RangeSlider` share.
+ *
+ * The two are separate components because their **focus models** are
+ * different — one `role="slider"` on the track against two of them in
+ * a `role="group"`, one tab stop against two
+ * ([decision](../../../docs/decisions/2026-09-01-a-two-thumb-range-is-its-own-component-and-shares-the-bar.md)).
+ * What is identical is the bar: a sunken rounded track, an intent
+ * fill inside it, and a round thumb pulled back by half its own
+ * width.
+ *
+ * Held here rather than copied for the reason `tileStyles.ts` exists:
+ * "the two look the same" spelled as two class strings is a promise
+ * that survives exactly one edit. `RangeSlider.test.tsx` compares the
+ * two thumbs as **computed** styles, so a class-name refactor cannot
+ * quietly break it either.
+ *
+ * No focus ring here. It is the one part of the bar the two do not
+ * share — `Slider` rings the track, because the track is the widget;
+ * `RangeSlider` rings each thumb, because each thumb is.
+ */
+
+export type SliderSize = "lg" | "md" | "sm"
+
+/** The bar itself. A `sm` bar is 2px; that is not a hit target. */
+export const SLIDER_TRACK_SIZE_CLASS: Record<
+  SliderSize,
+  string
+> = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3",
+}
+
+export const SLIDER_THUMB_SIZE_CLASS: Record<
+  SliderSize,
+  string
+> = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5",
+}
+
+/** Half of each `SLIDER_THUMB_SIZE_CLASS`, as the inline-start pull-back. */
+export const SLIDER_THUMB_OFFSET: Record<
+  SliderSize,
+  string
+> = {
+  sm: "-0.375rem",
+  md: "-0.5rem",
+  lg: "-0.625rem",
+}
+
+/**
+ * The row the bar sits in, which is taller than the bar: a 2px track
+ * is not a pointer target, and a finger is 44px. The height comes
+ * from the shared control-size system, so `[data-density]` decides
+ * it — never `MIN_TOUCH_TARGET_CLASS`, which would make this control
+ * taller than the ones beside it at desktop density
+ * ([decision](../../../docs/decisions/2026-08-05-controls-share-one-height-no-per-component-touch-floor.md)).
+ */
+export const SLIDER_ROW_CLASS =
+  "relative flex w-full touch-none cursor-pointer items-center rounded-full min-h-(--control-height-sm)"
+
+export const SLIDER_TRACK_CLASS =
+  "w-full overflow-hidden rounded-full bg-surface-sunken"
+
+export const SLIDER_THUMB_CLASS =
+  "absolute rounded-full border-2 border-surface-raised shadow-sm"

package/src/sourceRules.test.ts

@@ -545,7 +545,31 @@ test("the barrel is the only place components are re-exported", async () => {
   // what it deliberately does not cover — a tile that navigates is
   // not a radio, and giving one `aria-checked` would be worse than
   // the paint it replaced.
-  expect(componentNames.length).toBe(62)
+  //
+  // `TimecodeInput` — a typed media position, with an `isRange` mode
+  // for a section of a file — is +1 -> 63. `timecode.ts` is its
+  // member and stays out of this count by the `<Name>/<Name>.tsx`
+  // rule, while still being exported from the barrel: the fleet
+  // spells the *printing* half five times over (queuepilot twice,
+  // castkit, mux-magic twice) and a read-only surface needs the
+  // formatter without the field.
+  //
+  // `RangeSlider` is +1 -> 64. `Slider`'s own record said a two-thumb
+  // range is *"a different widget with its own focus model"*, and the
+  // focus model is exactly what makes it a component rather than an
+  // `isRange` mode: one `role="slider"` on the track becomes two of
+  // them on the thumbs inside a `role="group"`, and one tab stop
+  // becomes two. So this shares the ARITHMETIC (`sliderValue.ts`,
+  // called rather than copied) and the BAR (`sliderStyles.ts`, the
+  // same extraction `tileStyles.ts` is), and nothing else.
+  // `rangeSliderValue.ts` is its member and stays out of this count
+  // by the `<Name>/<Name>.tsx` rule. It lands beside `TimecodeInput`
+  // rather than instead of it: the two halves of QueuePilot's clip
+  // editor are a typed field and a dragged bar over one value, and
+  // `isRange` is right there and wrong here for a reason that is
+  // written down — a second text field is still a text field, while a
+  // second thumb cannot share one `aria-valuenow`.
+  expect(componentNames.length).toBe(64)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)