@charcuterie/ui 4.13.1 → 4.15.0

package/src/WeekdayIndicator/WeekdayIndicator.test.tsx

@@ -0,0 +1,34 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent } from "storybook/test"
+import { test } from "vitest"
+
+import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./WeekdayIndicator.stories.tsx"
+
+const { Playground, Interactive } = composeStories(stories)
+test("the pattern reads Monday first and exposes the filled days in words", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Playground)
+  const pattern = expectAgentDrivable(canvas, {
+    role: "img",
+    name: "Repeats: Monday, Tuesday, Wednesday, Thursday",
+  })
+  await expect(pattern.textContent).toBe("MTWTFSS")
+  await expectNoAxeViolations(canvasElement)
+})
+test("a changed pattern updates its accessible description", async () => {
+  const { canvas } = await mountStory(Interactive)
+  const button = expectAgentDrivable(canvas, {
+    role: "button",
+    name: "Switch pattern",
+  })
+  button.focus()
+  await userEvent.keyboard("{Enter}")
+  await expect(
+    canvas.getByRole("img", {
+      name: "Repeats: Saturday, Sunday",
+    }),
+  ).toBeInTheDocument()
+})

package/src/WeekdayIndicator/WeekdayIndicator.tsx

@@ -0,0 +1,57 @@
+import type { CategoricalIndex } from "@charcuterie/tokens"
+import type { ReactNode } from "react"
+
+import { CATEGORICAL_APPEARANCE_CLASS } from "../categoricalStyles.ts"
+import { toClassName } from "../toClassName.ts"
+
+export type WeekdayIndicatorProps = {
+  /** Monday is 0, Sunday is 6. These are observed weekdays, not an RRULE. */
+  days: readonly number[]
+  categorical?: CategoricalIndex
+  className?: string
+  label?: string
+}
+
+const DAYS = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const
+
+/** A named, noninteractive seven-day pattern, with letters as well as color. */
+export const WeekdayIndicator = ({
+  days,
+  categorical = 1,
+  className,
+  label = "Repeats",
+}: WeekdayIndicatorProps): ReactNode => (
+  <span
+    aria-label={`${label}: ${DAYS.filter((_day, index) => days.includes(index)).join(", ") || "no weekdays"}`}
+    className={toClassName(
+      "inline-flex flex-wrap gap-1",
+      className,
+    )}
+    role="img"
+    title={`${label}: ${DAYS.filter((_day, index) => days.includes(index)).join(", ") || "no weekdays"}`}
+  >
+    {DAYS.map((day, index) => (
+      <span
+        aria-hidden="true"
+        className={toClassName(
+          "flex size-6 items-center justify-center rounded-full border text-xs font-medium",
+          days.includes(index)
+            ? CATEGORICAL_APPEARANCE_CLASS[categorical]
+                .solid
+            : "border-border-subtle text-content-muted",
+        )}
+        key={day}
+      >
+        {day.slice(0, 1)}
+      </span>
+    ))}
+  </span>
+)

package/src/index.ts

@@ -117,6 +117,8 @@ export type {
 } from "./Card/Card.tsx"
 export { Card } from "./Card/Card.tsx"
 export type { CardAccentEdge } from "./Card/cardAccentEdge.ts"
+export type { ChartProps } from "./Chart/Chart.tsx"
+export { Chart } from "./Chart/Chart.tsx"
 export type { CheckboxProps } from "./Checkbox/Checkbox.tsx"
 export { Checkbox } from "./Checkbox/Checkbox.tsx"
 export type { ColorSchemeSwitcherProps } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"
@@ -417,6 +419,14 @@ export type {
 export { getIsRoutedHref } from "./RouterLink/routerLink.ts"
 export type { UnstyledLinkProps } from "./RouterLink/UnstyledLink.tsx"
 export { UnstyledLink } from "./RouterLink/UnstyledLink.tsx"
+export type {
+  ScheduleBand,
+  ScheduleBoardProps,
+  ScheduleDay,
+  ScheduleLayout,
+} from "./ScheduleBoard/ScheduleBoard.tsx"
+export { ScheduleBoard } from "./ScheduleBoard/ScheduleBoard.tsx"
+export type { ScheduleEntry } from "./ScheduleBoard/ScheduleItem.tsx"
 export type { SearchInputProps } from "./SearchInput/SearchInput.tsx"
 export { SearchInput } from "./SearchInput/SearchInput.tsx"
 export type {
@@ -542,3 +552,5 @@ export type { VirtualizedGridProps } from "./VirtualizedGrid/VirtualizedGrid.tsx
 export { VirtualizedGrid } from "./VirtualizedGrid/VirtualizedGrid.tsx"
 export type { VisuallyHiddenProps } from "./VisuallyHidden/VisuallyHidden.tsx"
 export { VisuallyHidden } from "./VisuallyHidden/VisuallyHidden.tsx"
+export type { WeekdayIndicatorProps } from "./WeekdayIndicator/WeekdayIndicator.tsx"
+export { WeekdayIndicator } from "./WeekdayIndicator/WeekdayIndicator.tsx"

package/src/sourceRules.test.ts

@@ -253,6 +253,7 @@ test("a container-query component is never storied in a shrink-to-fit cell", ()
     "PortraitTiles",
     // Metrics query the space remaining beside the media, not the entire card.
     "ProgressCard",
+    "ScheduleBoard",
     // `Stepper`'s container is the one that decides whether a
     // `horizontal` sequence is actually horizontal. Below `--cq-md`
     // it falls back to the vertical column, because four steps side
@@ -618,7 +619,8 @@ test("the barrel is the only place components are re-exported", async () => {
   // Breadcrumbs composes TextLink for the path back up a hierarchy.
   // ActionMenu composes IconButton and Menu for the overflow control.
   // ValuePairs owns compact label-over-value summaries.
-  expect(componentNames.length).toBe(70)
+  // Chart shares portable SVG geometry with Preact and image consumers.
+  expect(componentNames.length).toBe(73)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)
@@ -731,6 +733,7 @@ const ENTRY_POINT_RUNTIMES: Record<
       // browser, and it does so through this subpath so the coupling
       // is named rather than smuggled in through the main entry.
       "@charcuterie/logic/browser",
+      "@charcuterie/logic/core",
       "@charcuterie/tokens",
       "@floating-ui/react",
       // `Combobox`'s virtualization — the second runtime dependency