@getitdone-gmbh/kette-design-community 0.0.0-stage → 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,154 @@
+# Changelog
+
+This package is a copy of the general components of the Get IT Done design system. Each release names the library and token versions it was synced from. Only changes to components that are part of this package are listed.
+
+## 0.4.0
+
+Renamed from `@getitdone-gmbh/kette-design` to `@getitdone-gmbh/kette-design-community`, repo `getitdone-gmbh/kette-design-community`. Synced from component-library-react 0.26.23 and figma-design-tokens 5.16.0, the same as 0.3.7.
+
+### Migration
+
+- `npm uninstall @getitdone-gmbh/kette-design && npm install @getitdone-gmbh/kette-design-community`
+- Replace `@getitdone-gmbh/kette-design` with `@getitdone-gmbh/kette-design-community` in imports, CSS `@import`s, the Tailwind `presets` entry and the Tailwind `content` path (`./node_modules/@getitdone-gmbh/kette-design-community/dist/**/*.js`).
+- No component, theme or preset changes. `@getitdone-gmbh/kette-design` stays at 0.3.7 and is deprecated with a pointer to the new name.
+- The shadcn registry at `zero-design.itdone.de/r` keeps its URLs.
+
+## 0.3.7
+
+Synced from component-library-react 0.26.23 and figma-design-tokens 5.16.0 (was 0.26.22 and 5.15.0).
+
+### Components
+
+- **`NavigationMenu` placement**: the open panel is placed on the first open, when its content changes, on window resize and on page scroll. Before, it moved only on resize.
+- **`NavigationMenu` layer**: the open panel renders in a portal on `body` on the dropdown layer (`z-dropdown`, 65), so a header on the chrome layer no longer clips it and a cookie banner (`z-banner`, 40) can no longer cover its last rows. The viewport anchor is now `position: fixed` with viewport coordinates for `left` and `top` (before: an offset from the root). A header that wrapped the panel in its own `z-index` or a resize workaround can drop it.
+- **`NavigationMenu` height**: the panel is capped to the viewport height below the trigger minus `collisionPadding` (`--navigation-menu-available-height`) and scrolls inside, reachable by keyboard.
+- **Page chrome layer**: the fixed `Sidebar` uses `z-chrome` (30, was a raw 30). Put `sticky top-0 z-chrome` on your own app header or `TopBar`.
+- **Sticky bars in `Sheet`, `Dialog` and `Drawer`**: a sticky or fixed `SheetHeader`, `SheetFooter`, `DialogHeader`, `DialogFooter`, `DrawerHeader` or `DrawerFooter` reports its height as `--sticky-inset-top` or `--sticky-inset-bottom` on the content. The content panel, `SheetBody` and `DialogBody` use it as scroll padding, so a focused element is never hidden under the bar (WCAG 2.4.11). A bar in normal flow adds no padding. The six parts now forward a `ref`. New helper `src/lib/sticky-inset.ts`, in the shadcn registry as `sticky-inset` (pulled in by `sheet`, `dialog` and `drawer`).
+- **Focus return**: an opener that is re-created with a new key while a controlled overlay is open gets focus back on close. It is found again by id, else by tag, accessible name and text.
+- Tests: `navigation-menu.test.tsx`, `src/lib/overlay-behaviour.test.tsx`, `src/lib/css-selectors.test.ts`, `src/lib/z-layers.test.ts` (chrome layer), `src/lib/icon-stroke.test.tsx`.
+
+### Theme and Tailwind preset
+
+- New token from 5.16.0: `--z-chrome` (30, `z-chrome`).
+- **Fix: malformed selector in `dist/styles.css` and the preset.** The 2.25 rule for 12px glyphs is now three rules with one selector each, and the size classes are matched as `[class~='h-icon-2xs']` and `[class~='size-icon-2xs']`. Before, Tailwind treated the class selector in the base rule as a utility and re-emitted it under `[&>svg]:h-icon-2xs`, which produced the dead selector `...h-icon-2xs>svgsvg.lucide`. The new test `src/lib/css-selectors.test.ts` builds the package CSS and parses every selector. `postcss-selector-parser` is a new dev dependency for that test.
+
+### Stories
+
+- New: Dialog `StickyHeaderAndFooter`, Navigation Menu `LongPanelAboveBanner`, Sheet `StickyHeaderReverseTab`. 128 story files with 1027 stories.
+
+## 0.3.6
+
+Synced from component-library-react 0.26.22 and figma-design-tokens 5.15.0 (was 0.26.18 and 5.13.0).
+
+### Components
+
+- **`LogoTile` initials** use the logo tile font sizes and weight 700 (`font-bold`): `xs` (24px) `text-logo-tile-24` (11px), `sm` (32px) `text-logo-tile-32` (13px), `md` (40px) `text-logo-tile-40` (16px). Was the avatar-xs role (10px, weight 600) for `xs` and the ui-semibold role (weight 600) for `sm` and `md`. `DescriptionList` uses `LogoTile` and follows.
+- **`Sidebar` workspace switcher**: the trigger logo (24px) uses `rounded-logo-tile-24 text-logo-tile-24` instead of `rounded-[6px]` and `text-micro` (same pixels, weight 700). The menu item logo (20px) uses `rounded-logo-tile-20 text-logo-tile-20 font-bold leading-none` (radius 5, 10px, weight 700), was `rounded-item text-micro`.
+- **`CookieConsent`**: `titleAs` also accepts `p` (new exported type `CookieConsentTitleTag`, `HeadingTag | 'p'`). With `titleAs="p"` the banner title is a plain paragraph, the region keeps its accessible name and the banner adds no heading to the page. Default stays `h2`.
+- **Layering**: one z-index order for fixed and overlay components, see `docs/layering.md`. Page chrome (below 40), banners (40), sheet (50), dialog (60), menus and popovers (65), toast (70), tooltip (80). `CookieConsent` and the floating `ChatWindow` use `z-banner` (40, was 50), so every sheet and dialog now covers them (WCAG 2.4.11). `Sheet` and `Drawer` use `z-sheet`, `Toast` uses `z-toast` (70, was a raw 100), `HoverCard` content uses `z-dropdown` (65, was a raw 250) and its backdrop `z-dialog`, `Table` uses `z-sticky` and `z-raised`, the `NavigationMenu` root and indicator `z-sticky` and `z-raised`. Consumers that wrap a banner in their own z-index above 40 should drop that value.
+- **`NavigationMenu`**: the open panel stays inside the viewport. It is shifted left when it would pass the right edge and right when it would pass the left edge. New prop `collisionPadding` (px, default 16) on `NavigationMenu` and `NavigationMenuViewport`. The panel width is capped at the viewport width minus that margin.
+- `cn()` knows the `text-logo-tile-20/24/32/40/48` font sizes, so a later text colour class no longer merges them away.
+- Tests: Logo Tile, Sidebar logo tiles, Cookie Consent `titleAs="p"`, `navigation-menu.test.tsx`, `src/lib/z-layers.test.ts` (no raw z-index of 40 or more in a component, banner below the modal layers).
+
+### Theme and Tailwind preset
+
+- New tokens from 5.14.0 and 5.15.0: `--fontSize-logo-tile-20` to `-48` (`text-logo-tile-*`), `--borderRadius-logo-tile-20` (`rounded-logo-tile-20`), `--z-banner` (40, `z-banner`).
+- Icon stroke: the 2.25 rule for 12px glyphs in this package's preset now has the same `:not([data-stroke="fixed"])` opt-out as the 1.75 rule. Icons marked `data-stroke="fixed"` keep their own stroke inside 12px wrappers.
+
+### Stories
+
+- New: Cookie Consent `TitleAsParagraph` and `BelowOpenSheet`, Navigation Menu `RightAlignedNearEdge`. 128 story files with 1024 stories.
+
+## 0.3.5
+
+Synced from component-library-react 0.26.18 and figma-design-tokens 5.13.0 (was 0.26.16 and 5.12.0).
+
+### Components
+
+- **Behaviour change: `AlertTitle` renders a `<p>`, not an `<h5>`**. An alert title is rarely a real section heading, and the old default caused heading-order skips. The typography stays (`font-semibold leading-none`). `titleAs` still renders any `h1` to `h6`: where the title belongs to the document outline, pass `titleAs="h3"` (or the level that fits the page). Tests or selectors that looked up `role="heading"` for an alert title need `titleAs` or should query the text. `AlertTitleProps` now extends `React.HTMLAttributes<HTMLElement>`, the ref type is `HTMLElement`.
+- **`LogoTile` radius is fixed per size** (size x 0.25, as in the prototype): `xs` (24px) `rounded-logo-tile-24` (6px), `sm` (32px) `rounded-logo-tile-32` (8px), `md` (40px) `rounded-logo-tile-40` (10px). Was `rounded-item` for all sizes. The radius no longer follows the theme radius roles; it is 0 in the windows-95 theme. `DescriptionList` uses `LogoTile` and follows.
+
+### Theme and Tailwind preset
+
+- New tokens from 5.13.0: `--borderRadius-logo-tile-24`, `--borderRadius-logo-tile-32`, `--borderRadius-logo-tile-48` next to `--borderRadius-logo-tile-40` (`rounded-logo-tile-24/-32/-40/-48`).
+- Icon stroke opt-out: the 1.75 base rule from the token preset is now `:where(svg.lucide[stroke-width="2"]:not([data-stroke="fixed"]))`. An icon that deliberately sets `strokeWidth={2}` keeps stroke 2 with `data-stroke="fixed"`. Specificity stays zero.
+
+## 0.3.4
+
+Synced from component-library-react 0.26.16 and figma-design-tokens 5.12.0 (was 0.26.14 and 5.10.0).
+
+### Components
+
+- **Icon stroke**: lucide icons that keep their default `stroke-width="2"` render with the prototype stroke `var(--size-icon-stroke, 1.75)`, 12px glyphs (`h-icon-2xs`, `size-icon-2xs` or the direct `svg` child of such a wrapper, for example `StepMarker` sm) with `var(--size-icon-stroke-sm, 2.25)`. An explicit `strokeWidth` prop such as `1.5` is kept. Both rules are wrapped in `:where()`, so a utility class still wins. This is a slight visible change: icons are thinner than before (was 2).
+- **Check marks**: `Checkbox`, the `CheckboxGroup` card tick, the completed `Stepper` step and `StepMarker` draw the check with `var(--size-icon-stroke-check, 3)`. `Checkbox` now uses the lucide `Check` instead of the Radix check glyph, same 12px (`sm`) and 16px sizes.
+- **Navigation icons are 15px** (`icon-nav`): `SecondaryNav` item icons (wrapper and the svg inside it) and the icons in vertical `Tabs` triggers. Was 16px for `SecondaryNav`.
+
+### Theme and Tailwind preset
+
+- New tokens from 5.11.0 to 5.12.0: `--size-icon-nav` (15px, `h-icon-nav`, `w-icon-nav`, `size-icon-nav`), `--size-icon-stroke`, `--size-icon-stroke-sm`, `--size-icon-stroke-check` and the Figma pixel strokes `--size-icon-stroke-px-*`, `--borderRadius-logo-tile-40` (`rounded-logo-tile-40`).
+- The preset (`@getitdone-gmbh/kette-design/tailwind/preset`) carries the stroke rules as base styles plus `safelist: ['lucide']`, so apps that build their own Tailwind with the preset get them without importing `styles.css`. The 1.75 rule comes from the token preset, the 2.25 rule for 12px glyphs is added by this package's preset; `dist/styles.css` and Storybook are built from the same preset, so each rule exists exactly once.
+
+## 0.3.3
+
+Synced from component-library-react 0.26.14 and figma-design-tokens 5.10.0 (was 0.26.13 and 5.9.0).
+
+### Components
+
+- **NotificationMatrix**: new `selected` prop on `NotificationMatrixRow` and `NotificationMatrixCell`. A selected row uses the brand row tint `bg-background-selected-row` (also on hover, active and pinned cells), its description switches to `text-text-subtle-on-selected` for AA contrast. The row keeps `data-state="selected"` and `aria-selected`. New story Selected Row.
+
+### Theme
+
+- New roles from tokens 5.10.0: `background-selected-row` and `text-subtle-on-selected` (zero theme, light and dark, also in `document-surface.css`). The Tailwind preset gains `blue.950`.
+
+### Docs
+
+- The README no longer names the synced library and token versions; it links to the sync history in `docs/MAINTAINING.md`.
+
+## 0.3.2
+
+Synced from component-library-react 0.26.13 and figma-design-tokens 5.9.0 (was 0.26.12 and 5.8.0).
+
+### Components
+
+- **Text roles instead of alpha on text**: the new roles `text-text-inverse-subtle` and `text-text-on-inverse-static-subtle` replace the `text-*/NN` alpha colours in `TopBarBrand` (inverse byline), `MetricPanel` (`inverse` muted text; `inverse-fixed` muted text is now `text-text-subtle`), `HeroSection` (inverse supporting text), `CodeSnippet` (inverse gutter and label) and the inverse code highlight palette (comments, punctuation, numbers, properties, variables).
+- **Tooltip** and **HelpIcon**: supporting text on the dark tooltip uses `text-text-inverse-subtle`, which restores the hierarchy at AA contrast.
+- **Toast**: the destructive close icon uses the full `text-general-error-on` colour.
+
+### Theme
+
+- New roles from tokens 5.9.0: `text-inverse-subtle` and `text-on-inverse-static-subtle` (zero theme, light and dark, also in `document-surface.css`).
+
+## 0.3.1
+
+Synced from component-library-react 0.26.12 and figma-design-tokens 5.8.0 (was 0.26.7 and 5.5.0).
+
+### Components
+
+- **Heading level props** (`titleAs`, default stays the current level): `AlertTitle` (h5), `CardTitle` (h3), `KanbanColumn` (h3), `Attributes` (h3), `SheetSection` (h3), `NotificationList` (h2), `ChatWindow` (h2), `CookieConsent` (h2), `FacetFilter` (h2), `FacetGroup` (h3). New shared type `HeadingTag`.
+- **SingleSelect** and **MultiSelect**: single values can be invalid. New option field `invalid`, new props `invalidValues` and `isValueInvalid`. A selected id that is not in `options` is invalid and shown with its id as label. Invalid chips and values use the destructive style, screen readers get the `invalidSuffix` label text, the trigger gets `aria-invalid`.
+- **FileIcon**: the document variant has the extension tag across the lower left edge, the tag uses the new `typography-file-tag` role and a solid type colour with the matching `on-default` text in light and dark.
+- **FileUploadItem** and **MessageAttachment** show a FileIcon instead of their own round tile. `FileUploadItem` derives the file type from the file name when `kind` is not set and shows the error look for `status="error"`.
+- **Accordion**: new `inset` prop on `Accordion` and `AccordionItem`. Inside a `Card` the inset is dropped by default so labels align with the card heading; `inset` overrides either way.
+- **KanbanCard**: a grabbed card stays at full opacity and is marked by a dashed focus border (the reduced opacity broke text contrast).
+- **KanbanMoveToMenu**: the menu is non-modal, so the board around it is not hidden from assistive technology.
+- **BottomNavigationItem** with `count`: the accessible name starts with the visible label, the count is no longer hidden from screen readers.
+- **Stepper**, **Tooltip**, **HelpIcon**: supporting text no longer uses reduced opacity, contrast no longer depends on the surface.
+- **KpiStrip** `surface="raised"` uses the `bg-surface-strip-raised` role. Rendering is unchanged.
+- **TopBarMobileMenu**, **Sheet** and **Dialog** close buttons are a fixed 40x40 in every theme and preset. Items of a non-collapsible menu group get the same indent as an expanded group.
+
+### Theme
+
+- File type colours (`colors.data.file.<type>.default`) are solid and mode-stable, new `on-default` roles for every type. Image is green instead of violet, PDF follows the document colour.
+- New roles: `surface-strip-raised`, `typography-file-tag`, `size-textarea-compact`.
+
+### Storybook
+
+- 128 story files with 1020 stories (was 1015): new stories for Accordion in a Card, FileIcon, Multiselect and Single Select invalid values.
+
+## 0.3.0
+
+Synced from component-library-react 0.26.7 and figma-design-tokens 5.5.0. Storybook with the library stories, package renamed from `@getitdone-gmbh/ui` to `@getitdone-gmbh/kette-design`. Theme roles data rose, surface inverse static, text on inverse static, monospace stack. New props in Cookie Consent (`initialConsent`, `value`, `onValueChange`), Top Bar mobile menu (collapsible groups, footer) and the Message inverse static tone.
+
+## 0.2.0
+
+87 general components added (synced from component-library-react 0.26.4 and figma-design-tokens 5.2.0).

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023-2026 Get IT Done GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,134 @@
-# Temporary Holding Version
+# @getitdone-gmbh/kette-design-community
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@getitdone-gmbh/kette-design-community?label=npm&color=cb3837)](https://www.npmjs.com/package/@getitdone-gmbh/kette-design-community) [![license](https://img.shields.io/npm/l/@getitdone-gmbh/kette-design-community)](LICENSE)
+
+Free React components from the Get IT Done design system: the primitives plus the general components we build business software with. They are built on shadcn/ui and Radix UI, styled with Tailwind CSS, written in TypeScript, and they include a light and a dark theme.
+
+We build business software with many screens, tables, forms and states. These components are the base layer of that system. We are sharing them in case they are useful to others working on similar products.
+
+## Editions
+
+| Edition | What you get | Licence | Where |
+| --- | --- | --- | --- |
+| **Community** | This package: 127 components, the zero theme and a Tailwind preset | MIT, free | [npm](https://www.npmjs.com/package/@getitdone-gmbh/kette-design-community) |
+| **Enterprise (Die Kette)** | The complete chain: all components, design tokens, domain components, page templates, Figma files, agents and the rule set | Commercial, with every Die Kette licence | [kette.itdone.de](https://kette.itdone.de) |
+
+## What is included
+
+127 components: 40 primitives and 87 general components, plus the `useToast` hook, German and English labels and their helpers.
+
+**Primitives (40):** Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Collapsible, Command, Dialog, Drawer, Dropdown Menu, Form, Hover Card, Input, Kbd, Label, Navigation Menu, Pagination, Popover, Progress, Radio Group, Scroll Area, Select, Separator, Sheet, Skeleton, Slider, Switch, Table, Tabs, Textarea, Toast, Toaster, Toggle, Toggle Group, Tooltip.
+
+**General components (87):** Action Bar, Activity Feed (Timeline, Notification List), Autosave Status, Blockquote, Bottom Navigation, Button Close, Button Group, Calendar Grid (Week Grid, Month Grid), Card Default, Cell Grid, Charts (line and bar, pie, radar, histogram, treemap, sparkline, bar list, gauge), Chat Window, Checkbox Group, Chip, Code Snippet, Color Picker, Confirm Dialog, Content Divider, Cookie Consent, Countdown, Data Grid, Data State Panel, Date Picker, Description List (Attributes, Summary List), Design System Provider, Document Surface, Empty State, Facet Filter, Featured Icon, Feed Item, File Icon, File Upload, Filter Chip Bar, Form Section, Grid, Heatmap, Help Icon, Hero Section, Illustration, Inline CTA, Inline Edit, Input Digit, Kanban (with Move To Menu), Layout (Stack, Cluster, Tile Grid, Split View), Link, Link Card, List, List Item, Loading Overlay, Loading Spinner, Logo Tile, Message, Metric (KPI Strip), Metric Panel, Multiselect, Notification, Notification Matrix, Object Icon, Page Header, Pagination Dot Group, Phone Input, Progress Circle, Radio Cards, Rating Input, Rich Text Editor, Rich Text Toolbar, Secondary Nav, Secret Field, Section, Section Footer, Section Header, Section Label, Sidebar, Sidebar Nav, Signature Box, Signature Pad, Single Select, Spacing (Spacing, Spacer), Status Dot, Step Marker, Stepper, Table Cells, Table of Contents, Tag Input, Top Bar, Verified Tick, Versions.
+
+Plus the zero theme as CSS variables (typography, colours, radii, elevation, light and dark) and a Tailwind CSS 3 preset.
+
+Every component with a story in the library comes with it: 128 story files with 1027 stories, see [Storybook](#storybook).
+
+The library and token versions each release is synced from are listed in one place, the [sync history](docs/MAINTAINING.md#sync-history). What changed per release is in [CHANGELOG.md](CHANGELOG.md).
+
+## Install
+
+### As an npm package
+
+```bash
+npm install @getitdone-gmbh/kette-design-community
+```
+
+```js
+// tailwind.config.cjs
+module.exports = {
+  presets: [require('@getitdone-gmbh/kette-design-community/tailwind/preset')],
+  darkMode: ['class'],
+  content: ['./src/**/*.{ts,tsx}', './node_modules/@getitdone-gmbh/kette-design-community/dist/**/*.js'],
+};
+```
+
+```css
+/* app.css */
+@import '@getitdone-gmbh/kette-design-community/theme.css';
+@import '@getitdone-gmbh/kette-design-community/animation.css';
+/* Only needed for DocumentSurface: keeps the paper light inside a dark app. */
+@import '@getitdone-gmbh/kette-design-community/document-surface.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+```tsx
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@getitdone-gmbh/kette-design-community';
+
+export function Example() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Project Atlas</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Open</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+No Tailwind in your app? Import the prebuilt stylesheet instead: `import '@getitdone-gmbh/kette-design-community/styles.css'`.
+
+Dark mode follows the `dark` class on `<html>`, or the system setting when no class is set.
+
+`PhoneInput` shows country flags from `/flags/<code>.svg`. Copy `node_modules/@getitdone-gmbh/kette-design-community/flags` into your public folder, or point `flagBasePath` to where you serve them. Missing flags are hidden.
+
+`MultiSelect` and `SingleSelect` open only inside a `MultiSelectProvider` or `SingleSelectProvider` (one per page is enough, it keeps a single list open at a time).
+
+Texts are English by default. Wrap your app in `<DesignSystemProvider locale="de">` for German, or pass your own labels.
+
+### With the shadcn CLI
+
+Every component is also available from our registry, so you can copy the source into your project and change it:
+
+```bash
+npx shadcn@latest add https://zero-design.itdone.de/r/theme.json https://zero-design.itdone.de/r/button.json
+```
+
+The `theme` item adds `styles/getitdone/theme.css`, `styles/getitdone/animation.css`, `styles/getitdone/document-surface.css` and the Tailwind preset in `tailwind/getitdone/` (inside `src/` when your project has one). Import both CSS files in your global CSS and add the preset to `presets` in your Tailwind config, as shown above. Components pull in their helpers automatically.
+
+## The rest of the system
+
+This package is one layer. The full design system goes further, from single components to complete application screens and the rules behind them. These parts are not open source, but you can browse all of them:
+
+| Layer | What it is | Browse |
+| --- | --- | --- |
+| Design system and drafts | UI and UX rules for complex software with dos and don'ts, plus exploratory drafts of real product screens | [zero-design.itdone.de](https://zero-design.itdone.de) |
+| Primitives | The full primitive library this package is taken from, with every variant and state as a story | [components.itdone.de](https://components.itdone.de) |
+| Complex application components | Domain components built on the primitives: task boards, time grids, goal and capacity cards, pipelines, file views | [zero.itdone.de](https://zero.itdone.de) |
+| Page templates | Complete pages: app frame, dashboard, data grid, guided processes, settings, calendar, mobile, with a build guide per page | [zero-pages.itdone.de](https://zero-pages.itdone.de) |
+
+The complete chain (tokens, primitives, domain components, page templates, Figma files and the rule set) is the Enterprise edition, available through [Die Kette](https://kette.itdone.de).
+
+## Storybook
+
+The stories sit next to the components (`src/components/ui/**/*.stories.tsx`). They are not part of the npm package or the shadcn registry. Start Storybook locally, with light and dark mode and German or English labels in the toolbar:
+
+```bash
+npm install
+npm run storybook
+```
+
+`npm run build-storybook` writes a static build to `storybook-static/`. The complete documentation of the full library is at [components.itdone.de](https://components.itdone.de).
+
+## Development
+
+```bash
+npm install
+npm run typecheck
+npm test
+npm run build
+npm run build-storybook
+```
+
+## Licence
+
+MIT, see [LICENSE](LICENSE). Parts are derived from shadcn/ui, and the country flags come from flag-icons (MIT), see [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
+
+Made by [Get IT Done GmbH](https://itdone.de). Questions and feedback are welcome as GitHub issues.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,29 @@
+# Third party notices
+
+Everything in this package is original work of Get IT Done GmbH under the MIT licence in `LICENSE`, except the material listed below. npm dependencies (Radix UI primitives, `lucide-react`, `cmdk`, `vaul`, `react-day-picker`, `embla-carousel-react`, `@dnd-kit/core`, `react-dnd`, `libphonenumber-js` and others) are not bundled. They are installed by the consumer and keep their own licences.
+
+| Material | Where | Source | Licence |
+| --- | --- | --- | --- |
+| Component source derived from shadcn/ui (for example accordion, button, calendar, card, carousel, command, dialog, drawer, dropdown menu, form, popover, select, sheet, table, tabs, toast, tooltip) | `src/components/ui`, compiled into `dist/` | shadcn/ui, https://ui.shadcn.com | MIT, Copyright (c) 2023 shadcn |
+| Country flags (257 SVG files, 4x3 set, used by `PhoneInput`) | `flags/*.svg` | flag-icons by Panayiotis Lipiridis, https://github.com/lipis/flag-icons (the files carry the `flag-icons-<code>` id) | MIT, Copyright (c) 2013 Panayiotis Lipiridis |
+
+## MIT (shadcn/ui)
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+## MIT (flag-icons)
+
+Copyright (c) 2013 Panayiotis Lipiridis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,10 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+type AccordionInsetProp = {
+    inset?: boolean;
+};
+declare const Accordion: React.ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & AccordionInsetProp) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & AccordionInsetProp & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-accordion";
+import { ChevronDown as g } from "lucide-react";
+import * as e from "react";
+import { cn as l } from "../../lib/utils.js";
+import { InsideCardContext as b } from "./card.js";
+import { usePreset as m } from "./labels-context.js";
+const c = e.createContext(void 0), v = e.forwardRef(({ inset: r, ...t }, n) => /* @__PURE__ */ o(c.Provider, { value: r, children: /* @__PURE__ */ o(i.Root, { ref: n, ...t }) }));
+v.displayName = "Accordion";
+const h = e.forwardRef(({ className: r, inset: t, ...n }, a) => {
+  const s = m() === "zero", d = e.useContext(c), u = e.useContext(b), f = t ?? d ?? !u;
+  return /* @__PURE__ */ o(c.Provider, { value: f, children: /* @__PURE__ */ o(
+    i.Item,
+    {
+      ref: a,
+      className: l(
+        // Dedicated Accordion surface tokens (Design Tokens "colors/accordion/background/default" +
+        // "colors/accordion/foreground/default") — replaces the previous implicit (unstyled) surface
+        // and the raw `border-slate-200` palette value (ACCORDION-MAT-01: no raw hex/palette in
+        // product code). `border-form-border-default` is the same general-purpose content-divider
+        // token already used for this exact role by Card/Dialog/Popover/Tooltip/NavigationMenu/
+        // Drawer/Toast/DropdownMenu.
+        "border-b border-solid bg-transparent text-foreground",
+        // Zero: the default border role, the other themes keep the hairline.
+        s ? "border-border-default" : "border-hairline",
+        r
+      ),
+      ...n
+    }
+  ) });
+});
+h.displayName = "AccordionItem";
+const x = e.forwardRef(({ className: r, children: t, ...n }, a) => {
+  const s = m() === "zero", d = e.useContext(c) ?? !0;
+  return /* @__PURE__ */ o(i.Header, { className: "flex", children: /* @__PURE__ */ p(
+    i.Trigger,
+    {
+      ref: a,
+      className: l(
+        // `text-left` corrects the default `<button>` UA style (`text-align: center`) — Radix
+        // renders the Trigger as a real button (see react-collapsible's `Collapsible.Trigger`), and
+        // without this a wrapping multi-line header label would center instead of following the
+        // left-aligned "label | chevron" row every other disclosure/menu trigger in this system uses.
+        "flex flex-1 items-center justify-between gap-2 py-4 text-left transition-all [&[data-state=open]>svg]:rotate-180",
+        // Type comes from the dedicated `typography-accordion-title` role (size/weight/line-height/
+        // letter-spacing token, currently 16px/500/24px) rather than the ad hoc `font-medium` this
+        // used before. `leading-normal` is required alongside it because Tailwind Preflight resets
+        // `line-height: inherit` on real `<button>` elements — same reset `button.tsx`/`input.tsx`/
+        // `tabs.tsx` already work around for the same reason.
+        d && "px-3",
+        s ? "typography-ui-medium min-h-row py-0" : "typography-accordion-title leading-normal",
+        // Hover — underline is the non-color-dependent cue (WCAG "don't rely on color alone");
+        // paired with a full-row background wash so the entire clickable header shows affordance,
+        // not just the text. No dedicated `accordion-*-hover` token exists yet (ACCORDION-MAT-02,
+        // flagged below) — reuses the general-purpose `background-muted` surface wash, the same
+        // fallback Chip's `default`/`secondary` variants already use for an identical gap.
+        "hover:underline hover:bg-background-neutral-default",
+        // Press feedback (mouse-down) — same generic fallback as Chip's `active:bg-background-neutral-default
+        // active:brightness-95` for the same "no dedicated active token" gap.
+        "active:bg-background-neutral-default active:brightness-95",
+        // Keyboard focus ring — the system-standard treatment (matches Button, Tabs, Alert, Chip,
+        // Dialog, Select, …). Previously this had no focus-visible treatment at all (WCAG 2.4.7).
+        "rounded-item",
+        "focus-visible:outline-none",
+        "focus-visible:ring-focus",
+        "focus-visible:ring-offset-focus",
+        "focus-visible:ring-offset-background",
+        "focus-visible:ring-ring-default",
+        // Disabled — Radix's `Collapsible.Trigger` sets both a real `disabled` attribute and
+        // `data-disabled` when the parent `AccordionItem` has `disabled` (ACCORDION-A11Y-01:
+        // previously unsupported — a `disabled` item rendered fully interactive/clickable).
+        "disabled:pointer-events-none disabled:opacity-disabled",
+        r
+      ),
+      ...n,
+      children: [
+        t,
+        /* @__PURE__ */ o(g, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+      ]
+    }
+  ) });
+});
+x.displayName = i.Trigger.displayName;
+const y = e.forwardRef(({ className: r, children: t, ...n }, a) => {
+  const s = m() === "zero", d = e.useContext(c) ?? !0;
+  return /* @__PURE__ */ o(
+    i.Content,
+    {
+      ref: a,
+      className: l(
+        // Type comes from the dedicated `typography-accordion-content` role (size/weight/line-height/
+        // letter-spacing token, currently 14px/400/24px), replacing the ad hoc `text-sm`.
+        "overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+        // Reduced motion — instant show/hide instead of the height animation, matching
+        // DropdownMenuContent/SelectContent/TooltipContent's identical `motion-reduce:` fallback.
+        "motion-reduce:animate-none motion-reduce:transition-none",
+        s ? "typography-ui-relaxed" : "typography-accordion-content"
+      ),
+      ...n,
+      children: /* @__PURE__ */ o("div", { className: l(d && "px-3", "pb-4 pt-0", r), children: t })
+    }
+  );
+});
+y.displayName = i.Content.displayName;
+export {
+  v as Accordion,
+  y as AccordionContent,
+  h as AccordionItem,
+  x as AccordionTrigger
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/ui/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../src/components/ui/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { ChevronDown } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\nimport { InsideCardContext } from './card';\nimport { usePreset } from './labels-context';\n\n// Horizontal inset of trigger and content. Set on the root or per item, the item wins. Undefined means follow the context: inset on a standalone accordion, none inside a Card.\nconst AccordionInsetContext = React.createContext<boolean | undefined>(undefined);\n\ntype AccordionInsetProp = {\n  // Horizontal padding (px-3) of trigger and content. Default follows the context: true standalone (page, menu, panel), false inside a Card so the labels align with the card heading (the workload.zero prototype aligns card content with the card heading). Set true or false to override.\n  inset?: boolean;\n};\n\nconst Accordion = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & AccordionInsetProp\n>(({ inset, ...props }, ref) => (\n  <AccordionInsetContext.Provider value={inset}>\n    <AccordionPrimitive.Root ref={ref} {...(props as React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>)} />\n  </AccordionInsetContext.Provider>\n));\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & AccordionInsetProp\n>(({ className, inset: insetProp, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  const rootInset = React.useContext(AccordionInsetContext);\n  const inCard = React.useContext(InsideCardContext);\n  const inset = insetProp ?? rootInset ?? !inCard;\n  return (\n  <AccordionInsetContext.Provider value={inset}>\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      // Dedicated Accordion surface tokens (Design Tokens \"colors/accordion/background/default\" +\n      // \"colors/accordion/foreground/default\") — replaces the previous implicit (unstyled) surface\n      // and the raw `border-slate-200` palette value (ACCORDION-MAT-01: no raw hex/palette in\n      // product code). `border-form-border-default` is the same general-purpose content-divider\n      // token already used for this exact role by Card/Dialog/Popover/Tooltip/NavigationMenu/\n      // Drawer/Toast/DropdownMenu.\n      'border-b border-solid bg-transparent text-foreground',\n      // Zero: the default border role, the other themes keep the hairline.\n      zero ? 'border-border-default' : 'border-hairline',\n      className,\n    )}\n    {...props}\n  />\n  </AccordionInsetContext.Provider>\n  );\n});\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  const inset = React.useContext(AccordionInsetContext) ?? true;\n  return (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        // `text-left` corrects the default `<button>` UA style (`text-align: center`) — Radix\n        // renders the Trigger as a real button (see react-collapsible's `Collapsible.Trigger`), and\n        // without this a wrapping multi-line header label would center instead of following the\n        // left-aligned \"label | chevron\" row every other disclosure/menu trigger in this system uses.\n        'flex flex-1 items-center justify-between gap-2 py-4 text-left transition-all [&[data-state=open]>svg]:rotate-180',\n        // Type comes from the dedicated `typography-accordion-title` role (size/weight/line-height/\n        // letter-spacing token, currently 16px/500/24px) rather than the ad hoc `font-medium` this\n        // used before. `leading-normal` is required alongside it because Tailwind Preflight resets\n        // `line-height: inherit` on real `<button>` elements — same reset `button.tsx`/`input.tsx`/\n        // `tabs.tsx` already work around for the same reason.\n        inset && 'px-3',\n        zero ? 'typography-ui-medium min-h-row py-0' : 'typography-accordion-title leading-normal',\n        // Hover — underline is the non-color-dependent cue (WCAG \"don't rely on color alone\");\n        // paired with a full-row background wash so the entire clickable header shows affordance,\n        // not just the text. No dedicated `accordion-*-hover` token exists yet (ACCORDION-MAT-02,\n        // flagged below) — reuses the general-purpose `background-muted` surface wash, the same\n        // fallback Chip's `default`/`secondary` variants already use for an identical gap.\n        'hover:underline hover:bg-background-neutral-default',\n        // Press feedback (mouse-down) — same generic fallback as Chip's `active:bg-background-neutral-default\n        // active:brightness-95` for the same \"no dedicated active token\" gap.\n        'active:bg-background-neutral-default active:brightness-95',\n        // Keyboard focus ring — the system-standard treatment (matches Button, Tabs, Alert, Chip,\n        // Dialog, Select, …). Previously this had no focus-visible treatment at all (WCAG 2.4.7).\n        'rounded-item',\n        'focus-visible:outline-none',\n        'focus-visible:ring-focus',\n        'focus-visible:ring-offset-focus',\n        'focus-visible:ring-offset-background',\n        'focus-visible:ring-ring-default',\n        // Disabled — Radix's `Collapsible.Trigger` sets both a real `disabled` attribute and\n        // `data-disabled` when the parent `AccordionItem` has `disabled` (ACCORDION-A11Y-01:\n        // previously unsupported — a `disabled` item rendered fully interactive/clickable).\n        'disabled:pointer-events-none disabled:opacity-disabled',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown aria-hidden=\"true\" className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n  );\n});\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  const inset = React.useContext(AccordionInsetContext) ?? true;\n  return (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      // Type comes from the dedicated `typography-accordion-content` role (size/weight/line-height/\n      // letter-spacing token, currently 14px/400/24px), replacing the ad hoc `text-sm`.\n      'overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n      // Reduced motion — instant show/hide instead of the height animation, matching\n      // DropdownMenuContent/SelectContent/TooltipContent's identical `motion-reduce:` fallback.\n      'motion-reduce:animate-none motion-reduce:transition-none',\n      zero ? 'typography-ui-relaxed' : 'typography-accordion-content',\n    )}\n    {...props}\n  >\n    {/* Same horizontal padding as the trigger so the content text stays aligned with the header label. */}\n    <div className={cn(inset && 'px-3', 'pb-4 pt-0', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n  );\n});\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n\n// --- KNOWN TOKEN / SPEC GAPS (component-library-maintainer cannot close these from accordion.tsx —\n// they are either color VALUES owned by the design tokens, or a missing Figma\n// frame; this file only consumes token names and must not hardcode a raw hex/palette value or\n// fabricate a state matrix that isn't backed by a real spec) ---\n//\n// 1. ACCORDION-A11Y-02 / ACCORDION-A11Y-03 (light/dark parity): re-verified 2026-07-09 against the\n//    installed the design tokens (the only version published to the\n//    registry — the token package returns just \"3.4.10\") —\n//    its `dist/theme.css` still defines `--colors-accordion-background-default` and\n//    `--colors-accordion-foreground-default` exactly once, in `:root`, with no `.dark` /\n//    `prefers-color-scheme: dark` override, so hover:/active:bg-background-neutral-default (which DOES\n//    invert in dark) is paired against a foreground that never adapts — contrast collapses to\n//    ~1.2:1 in dark mode (needs >=4.5:1, WCAG 1.4.3 AA).\n//    IMPORTANT: the source of truth is already fixed — `figma-tokens/default_theme_dark.json` in\n//    the figma-design-tokens repo already carries distinct dark values (accordion/background →\n//    slate.900, accordion/foreground → slate.50), and running `npm run build:css-vars` from that\n//    repo's current HEAD locally reproduces the correct `.dark`/media overrides. The gap is purely\n//    that the last published package (3.4.10) was not rebuilt/republished after that source fix\n//    landed, so consumers are stuck on stale compiled output. BLOCKED on design-tokens-maintainer\n//    cutting a new release (rebuild + `npm publish`, human release approval required) — no change\n//    is possible or needed in accordion.tsx, which already consumes the correct token names. Same\n//    published-vs-source staleness likely affects every other component whose only Figma-driven\n//    delta is a single default-state key (e.g. dropdown-menu.tsx's own flagged token gap) and is\n//    worth a repo-wide re-publish rather than a per-component patch.\n//\n// 2. ACCORDION-MAT-02 (no dedicated hover/active tokens): unlike Dropdown/Select's \"_list item\"\n//    component sets, the Figma Component Library file has no Accordion frame with\n//    Hover/Focus/Disabled state symbols to source exact values from — only the two surface color\n//    tokens above plus the `typography/accordion-title` and `typography/accordion-content` text\n//    styles exist for this component. The hover/active treatment above reuses the same\n//    `background-muted` / `brightness-95` fallback Chip already uses for an identical gap, rather\n//    than inventing a new one-off value.\n//\n// 3. \"Invalid\" state — not applicable: Accordion is a disclosure widget with no form-validation\n//    semantics (like DropdownMenuItem), so `invalid` is intentionally not modeled here.\n//\n// 4. Missing Figma spec frame (routed to figma-design-sync / design-system-usage maintainers): a\n//    `search_design_system` query for \"Accordion\" against this file (bzBnRLfRJNknGg9UYJIHb0) only\n//    surfaces a stale \"FAQ section\" component_set hit (last updated 2024-07-23) that is not reachable\n//    from any of the file's current top-level pages (Welcome, Avatars, Button, Select, Tooltips,\n//    CardMetrics, Logos, Icons, Misc icons, Utilities) — i.e. no live Accordion/FAQ frame exists in\n//    the file today, only the token pair + two text styles consumed above. Recommend either\n//    re-adding an explicit Accordion component frame (with Hover/Focus/Disabled symbols) to the\n//    Component Library file, or removing the stale search-index entry, so a future alignment pass\n//    has a real states matrix to verify against instead of the Material/repo-precedent fallback\n//    used here.\n"],"names":["Accordion","AccordionItem","AccordionTrigger","AccordionContent"],"mappings":";;;;;;;;AAWA;AAeAA;AAEA;AAIE;AAIA;AAEA;AAAoB;AAAnB;AACC;AACW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOT;AAAA;AAEiC;AACjC;AAAA;AAEE;AAAA;AAIR;AACAC;AAEA;AAIE;AAEA;AAEE;AAAoB;AAAnB;AACC;AACW;AAAA;AAAA;AAAA;AAAA;AAKT;AAAA;AAAA;AAAA;AAAA;AAAA;AAMS;AACsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAM/C;AAAA;AAAA;AAGA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAIA;AACA;AAAA;AAEE;AAEH;AAAA;AAC8F;AAAA;AAAA;AAIrG;AACAC;AAEA;AAIE;AAEA;AACA;AAAoB;AAAnB;AACC;AACW;AAAA;AAAA;AAGT;AAAA;AAAA;AAGA;AACiC;AAAA;AAE/B;AAGmE;AAAA;AAG3E;AACAC;;;;;;;"}

package/dist/components/ui/action-bar.d.ts

@@ -0,0 +1,69 @@
+import { InputProps } from './input';
+import * as React from 'react';
+declare const ActionBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ActionBarRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ActionBarSpacer: () => React.JSX.Element;
+export type ActionBarSearchProps = Omit<InputProps, 'variant' | 'size' | 'aria-label'> & {
+    'aria-label': string;
+};
+declare const ActionBarSearch: React.ForwardRefExoticComponent<Omit<InputProps, "size" | "variant" | "aria-label"> & {
+    'aria-label': string;
+} & React.RefAttributes<HTMLInputElement>>;
+export interface ActionBarFilterTag {
+    id: string;
+    label: string;
+    onRemove: () => void;
+}
+export interface ActionBarFilterTagsProps extends React.HTMLAttributes<HTMLUListElement> {
+    tags: ActionBarFilterTag[];
+    /** Renders the Reset link when provided and at least one tag exists. */
+    onReset?: () => void;
+    resetLabel?: string;
+}
+declare const ActionBarFilterTags: React.ForwardRefExoticComponent<ActionBarFilterTagsProps & React.RefAttributes<HTMLUListElement>>;
+export interface BatchBarAction {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onSelect?: () => void;
+    destructive?: boolean;
+    disabled?: boolean;
+    render?: (button: React.ReactElement) => React.ReactNode;
+}
+export interface BatchBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Number of selected rows. Mount the bar only while at least one row is selected. */
+    selectedCount: number;
+    /** Called by Clear and by the leading checkbox. */
+    onClear: () => void;
+    /** Inline actions, shown as outlined buttons up to `maxInline`; the rest moves into the More menu. */
+    actions?: BatchBarAction[];
+    /** Always in the More menu. */
+    moreActions?: BatchBarAction[];
+    /** Inline actions shown before overflowing into the More menu. Default 3. */
+    maxInline?: number;
+    /** Text of the count, `{count} selected` by default. */
+    countLabel?: (count: number) => string;
+    clearLabel?: string;
+    moreLabel?: string;
+    /** Chip slot after the count, for example a `Chip` naming the selection scope ("All 120 matches") or its status. Pass visible text. */
+    chip?: React.ReactNode;
+}
+declare const BatchBar: React.ForwardRefExoticComponent<BatchBarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ActionBarDataSwitchOption {
+    value: string;
+    label: string;
+}
+export interface ActionBarDataSwitchProps {
+    options: ActionBarDataSwitchOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    icon?: React.ReactNode;
+    'aria-label': string;
+    className?: string;
+}
+declare const ActionBarDataSwitch: {
+    ({ options, value, defaultValue, onValueChange, icon, "aria-label": ariaLabel, className }: ActionBarDataSwitchProps): React.JSX.Element;
+    displayName: string;
+};
+export { ActionBar, ActionBarDataSwitch, ActionBarFilterTags, ActionBarRow, ActionBarSearch, ActionBarSpacer, BatchBar };