npm - @structuralists/scaffolding - Versions diffs - 0.0.1 - Mend

@structuralists/scaffolding 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (225) hide show

package/.storybook/main.ts +9 -0
package/.storybook/manager.ts +13 -0
package/.storybook/preview.tsx +18 -0
package/CLAUDE.md +30 -0
package/LICENSE +21 -0
package/README.md +7 -0
package/bun.lock +947 -0
package/bunfig.toml +2 -0
package/eslint.config.mjs +106 -0
package/index.ts +1 -0
package/package.json +50 -0
package/src/components/Chat/ChatComposer/ChatComposer.stories.tsx +68 -0
package/src/components/Chat/ChatComposer/index.tsx +74 -0
package/src/components/Chat/ChatComposer/styles.module.css +88 -0
package/src/components/Chat/ChatComposer/types.ts +11 -0
package/src/components/Chat/ChatMessage/ChatMessage.stories.tsx +111 -0
package/src/components/Chat/ChatMessage/index.tsx +42 -0
package/src/components/Chat/ChatMessage/styles.module.css +58 -0
package/src/components/Chat/ChatMessage/types.ts +14 -0
package/src/components/Chat/ChatRecipientsHeader/ChatRecipientsHeader.stories.tsx +145 -0
package/src/components/Chat/ChatRecipientsHeader/index.tsx +29 -0
package/src/components/Chat/ChatRecipientsHeader/styles.module.css +48 -0
package/src/components/Chat/ChatRecipientsHeader/types.ts +26 -0
package/src/components/Chat/ChatShell/ChatShell.stories.tsx +203 -0
package/src/components/Chat/ChatShell/index.tsx +16 -0
package/src/components/Chat/ChatShell/styles.module.css +27 -0
package/src/components/Chat/ChatShell/types.ts +7 -0
package/src/components/Chat/PillCombobox/PillCombobox.stories.tsx +59 -0
package/src/components/Chat/PillCombobox/index.tsx +17 -0
package/src/components/Chat/PillCombobox/styles.module.css +29 -0
package/src/components/Chat/PillCombobox/types.ts +28 -0
package/src/components/Chat/PillComboboxCore/Core.tsx +235 -0
package/src/components/Chat/PillComboboxCore/styles.module.css +79 -0
package/src/components/Chat/index.ts +12 -0
package/src/components/Content/Badge/Badge.stories.tsx +31 -0
package/src/components/Content/Badge/index.tsx +22 -0
package/src/components/Content/Badge/styles.module.css +25 -0
package/src/components/Content/Badge/types.ts +7 -0
package/src/components/Content/Card/Card.stories.tsx +24 -0
package/src/components/Content/Card/index.tsx +21 -0
package/src/components/Content/Card/styles.module.css +13 -0
package/src/components/Content/Card/types.ts +8 -0
package/src/components/Content/EditableMarkdown/EditableMarkdown.stories.tsx +58 -0
package/src/components/Content/EditableMarkdown/index.tsx +140 -0
package/src/components/Content/EditableMarkdown/styles.module.css +221 -0
package/src/components/Content/EditableMarkdown/types.ts +11 -0
package/src/components/Content/Heading/Heading.stories.tsx +26 -0
package/src/components/Content/Heading/index.tsx +20 -0
package/src/components/Content/Heading/styles.module.css +19 -0
package/src/components/Content/Heading/types.ts +8 -0
package/src/components/Content/Link/Link.stories.tsx +21 -0
package/src/components/Content/Link/index.tsx +19 -0
package/src/components/Content/Link/styles.module.css +11 -0
package/src/components/Content/Link/types.ts +8 -0
package/src/components/Content/List/List.stories.tsx +62 -0
package/src/components/Content/List/index.tsx +26 -0
package/src/components/Content/List/styles.module.css +41 -0
package/src/components/Content/List/types.ts +33 -0
package/src/components/Content/LoadingContainer/LoadingContainer.stories.tsx +105 -0
package/src/components/Content/LoadingContainer/index.tsx +36 -0
package/src/components/Content/LoadingContainer/styles.module.css +54 -0
package/src/components/Content/LoadingContainer/types.ts +8 -0
package/src/components/Content/Markdown/Markdown.stories.tsx +39 -0
package/src/components/Content/Markdown/index.tsx +28 -0
package/src/components/Content/Markdown/styles.module.css +79 -0
package/src/components/Content/Markdown/types.ts +8 -0
package/src/components/Content/Menu/Menu.stories.tsx +186 -0
package/src/components/Content/Menu/index.tsx +259 -0
package/src/components/Content/Menu/styles.module.css +103 -0
package/src/components/Content/Menu/types.ts +25 -0
package/src/components/Content/Text/Text.stories.tsx +36 -0
package/src/components/Content/Text/index.tsx +35 -0
package/src/components/Content/Text/styles.module.css +30 -0
package/src/components/Content/Text/types.ts +11 -0
package/src/components/Forms/Button/Button.stories.tsx +40 -0
package/src/components/Forms/Button/index.tsx +43 -0
package/src/components/Forms/Button/styles.module.css +67 -0
package/src/components/Forms/Button/types.ts +16 -0
package/src/components/Forms/ColorInput/index.tsx +22 -0
package/src/components/Forms/ColorInput/styles.module.css +19 -0
package/src/components/Forms/ColorInput/types.ts +12 -0
package/src/components/Forms/Field/Field.stories.tsx +35 -0
package/src/components/Forms/Field/index.tsx +17 -0
package/src/components/Forms/Field/styles.module.css +21 -0
package/src/components/Forms/Field/types.ts +9 -0
package/src/components/Forms/IconButton/IconButton.stories.tsx +91 -0
package/src/components/Forms/IconButton/index.tsx +55 -0
package/src/components/Forms/IconButton/styles.module.css +61 -0
package/src/components/Forms/IconButton/types.ts +23 -0
package/src/components/Forms/Input/Input.stories.tsx +22 -0
package/src/components/Forms/Input/index.tsx +42 -0
package/src/components/Forms/Input/styles.module.css +30 -0
package/src/components/Forms/Input/types.ts +18 -0
package/src/components/Forms/SearchInput/index.tsx +41 -0
package/src/components/Forms/SearchInput/styles.module.css +30 -0
package/src/components/Forms/SearchInput/types.ts +17 -0
package/src/components/Forms/Select/MultiSelect/MultiSelect.stories.tsx +116 -0
package/src/components/Forms/Select/MultiSelect/index.tsx +74 -0
package/src/components/Forms/Select/MultiSelect/types.ts +15 -0
package/src/components/Forms/Select/SingleSelect/SingleSelect.stories.tsx +174 -0
package/src/components/Forms/Select/SingleSelect/index.tsx +62 -0
package/src/components/Forms/Select/SingleSelect/types.ts +12 -0
package/src/components/Forms/Select/index.ts +4 -0
package/src/components/Forms/Select/internal/OptionList.tsx +124 -0
package/src/components/Forms/Select/internal/SelectTrigger.tsx +60 -0
package/src/components/Forms/Select/internal/styles.module.css +122 -0
package/src/components/Forms/Textarea/Textarea.stories.tsx +25 -0
package/src/components/Forms/Textarea/index.tsx +48 -0
package/src/components/Forms/Textarea/styles.module.css +34 -0
package/src/components/Forms/Textarea/types.ts +24 -0
package/src/components/Json/Json/Json.stories.tsx +33 -0
package/src/components/Json/Json/index.tsx +38 -0
package/src/components/Json/Json/types.ts +21 -0
package/src/components/Json/JsonTable/JsonLeafNode.tsx +31 -0
package/src/components/Json/JsonTable/JsonTable.stories.tsx +52 -0
package/src/components/Json/JsonTable/index.tsx +33 -0
package/src/components/Json/JsonTable/types.ts +13 -0
package/src/components/Json/JsonTable/utils.ts +6 -0
package/src/components/Layout/Bar/Bar.stories.tsx +100 -0
package/src/components/Layout/Bar/index.tsx +17 -0
package/src/components/Layout/Bar/styles.module.css +34 -0
package/src/components/Layout/Bar/types.ts +10 -0
package/src/components/Layout/Debug/Debug.stories.tsx +86 -0
package/src/components/Layout/Debug/index.tsx +41 -0
package/src/components/Layout/Debug/styles.module.css +13 -0
package/src/components/Layout/Debug/types.ts +12 -0
package/src/components/Layout/Divider/Divider.stories.tsx +22 -0
package/src/components/Layout/Divider/index.tsx +3 -0
package/src/components/Layout/Divider/styles.module.css +6 -0
package/src/components/Layout/Grid/Grid.stories.tsx +28 -0
package/src/components/Layout/Grid/index.tsx +29 -0
package/src/components/Layout/Grid/styles.module.css +12 -0
package/src/components/Layout/Grid/types.ts +9 -0
package/src/components/Layout/Panels/Panels.stories.tsx +287 -0
package/src/components/Layout/Panels/index.tsx +119 -0
package/src/components/Layout/Panels/styles.module.css +103 -0
package/src/components/Layout/Panels/types.ts +36 -0
package/src/components/Layout/Stack/Stack.stories.tsx +45 -0
package/src/components/Layout/Stack/index.tsx +73 -0
package/src/components/Layout/Stack/styles.module.css +41 -0
package/src/components/Layout/Stack/types.ts +17 -0
package/src/components/Modals/ConfirmModal/ConfirmModal.stories.tsx +73 -0
package/src/components/Modals/ConfirmModal/index.tsx +72 -0
package/src/components/Modals/ConfirmModal/styles.module.css +62 -0
package/src/components/Modals/ConfirmModal/types.ts +14 -0
package/src/components/Modals/LargeModal/LargeModal.stories.tsx +75 -0
package/src/components/Modals/LargeModal/index.tsx +9 -0
package/src/components/Modals/LargeModal/styles.module.css +6 -0
package/src/components/Modals/LargeModal/types.ts +18 -0
package/src/components/Modals/MediumModal/MediumModal.stories.tsx +121 -0
package/src/components/Modals/MediumModal/MediumModal.test.tsx +48 -0
package/src/components/Modals/MediumModal/index.tsx +9 -0
package/src/components/Modals/MediumModal/styles.module.css +5 -0
package/src/components/Modals/MediumModal/types.ts +18 -0
package/src/components/Modals/index.ts +3 -0
package/src/components/Modals/internal/ModalBody.tsx +21 -0
package/src/components/Modals/internal/ModalFooter.tsx +12 -0
package/src/components/Modals/internal/ModalHeader.tsx +27 -0
package/src/components/Modals/internal/ModalShell.tsx +112 -0
package/src/components/Modals/internal/styles.module.css +141 -0
package/src/components/Navigation/TabBar/TabBar.stories.tsx +59 -0
package/src/components/Navigation/TabBar/index.tsx +25 -0
package/src/components/Navigation/TabBar/styles.module.css +32 -0
package/src/components/Navigation/TabBar/types.ts +22 -0
package/src/components/Navigation/VerticalNav/VerticalNav.stories.tsx +41 -0
package/src/components/Navigation/VerticalNav/index.tsx +25 -0
package/src/components/Navigation/VerticalNav/styles.module.css +28 -0
package/src/components/Navigation/VerticalNav/types.ts +19 -0
package/src/components/Overlays/Popover/Popover.stories.tsx +154 -0
package/src/components/Overlays/Popover/index.tsx +175 -0
package/src/components/Overlays/Popover/styles.module.css +59 -0
package/src/components/Overlays/Popover/types.ts +34 -0
package/src/components/Overlays/Tooltip/Tooltip.stories.tsx +41 -0
package/src/components/Overlays/Tooltip/index.tsx +115 -0
package/src/components/Overlays/Tooltip/styles.module.css +25 -0
package/src/components/Overlays/Tooltip/types.ts +15 -0
package/src/components/Primitives/EmptyValue/EmptyValue.stories.tsx +18 -0
package/src/components/Primitives/EmptyValue/index.tsx +3 -0
package/src/components/Primitives/EmptyValue/styles.module.css +3 -0
package/src/components/Primitives/LinedStack/LinedStack.stories.tsx +101 -0
package/src/components/Primitives/LinedStack/index.tsx +41 -0
package/src/components/Primitives/LinedStack/styles.module.css +27 -0
package/src/components/Primitives/LinedStack/types.ts +49 -0
package/src/components/Primitives/LongText/LongText.stories.tsx +72 -0
package/src/components/Primitives/LongText/index.tsx +67 -0
package/src/components/Primitives/LongText/styles.module.css +30 -0
package/src/components/Primitives/LongText/types.ts +4 -0
package/src/components/Primitives/Num/Num.stories.tsx +51 -0
package/src/components/Primitives/Num/index.tsx +37 -0
package/src/components/Primitives/Num/types.ts +19 -0
package/src/components/Primitives/Percent/Percent.stories.tsx +48 -0
package/src/components/Primitives/Percent/index.tsx +15 -0
package/src/components/Primitives/Percent/types.ts +10 -0
package/src/components/Primitives/RelativeTime/RelativeTime.stories.tsx +57 -0
package/src/components/Primitives/RelativeTime/index.tsx +31 -0
package/src/components/Primitives/RelativeTime/types.ts +3 -0
package/src/components/Tables/BigTable/BigTable.stories.tsx +367 -0
package/src/components/Tables/BigTable/CLAUDE.md +118 -0
package/src/components/Tables/BigTable/columnDefs.tsx +208 -0
package/src/components/Tables/BigTable/index.tsx +104 -0
package/src/components/Tables/BigTable/styles.module.css +83 -0
package/src/components/Tables/BigTable/types.ts +20 -0
package/src/components/Tables/QuickTable/CLAUDE.md +118 -0
package/src/components/Tables/QuickTable/QuickTable.stories.tsx +121 -0
package/src/components/Tables/QuickTable/index.tsx +86 -0
package/src/components/Tables/QuickTable/internal.tsx +48 -0
package/src/components/Tables/QuickTable/styles.module.css +65 -0
package/src/components/Tables/QuickTable/types.ts +40 -0
package/src/env.d.ts +4 -0
package/src/index.ts +87 -0
package/src/storybook/CLAUDE.md +35 -0
package/src/storybook/Composition.stories.tsx +269 -0
package/src/storybook/Lorem/index.tsx +54 -0
package/src/storybook/Placeholder/index.tsx +27 -0
package/src/storybook/Placeholder/styles.module.css +20 -0
package/src/storybook/Repeat/index.tsx +23 -0
package/src/storybook/Toggle/index.tsx +29 -0
package/src/storybook/_StoryUtils.stories.tsx +58 -0
package/src/storybook/index.ts +4 -0
package/src/tokens.ts +31 -0
package/src/utils.test.ts +24 -0
package/src/utils.ts +2 -0
package/test-setup.ts +3 -0
package/tokens.css +323 -0
package/tsconfig.json +16 -0

package/src/components/Content/Menu/styles.module.css ADDED Viewed

@@ -0,0 +1,103 @@
+.trigger {
+  padding: 2px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius);
+  background-color: transparent;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font);
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+.trigger:hover {
+  background-color: var(--ui-background-1);
+}
+.panel {
+  min-width: 11rem;
+  background-color: var(--ui-background-0);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  box-shadow: 0 2px 8px var(--ui-shadow-soft);
+  padding: var(--ui-space-1) 0;
+  display: flex;
+  flex-direction: column;
+}
+/* Root panel is portaled to <body> and positioned in viewport coords by JS.
+ * Same z-index tier as every other portal layer (Modal, Popover, Tooltip);
+ * stacking between layers is decided by DOM-append order. */
+.panelRoot {
+  position: fixed;
+  z-index: 100;
+}
+/* Submenus stay nested inside the root panel and sit relative to their
+ * itemWrapper. */
+.panelSubmenu {
+  position: absolute;
+}
+.subOpenRight   { left: calc(100% + 2px); }
+.subOpenLeft    { right: calc(100% + 2px); }
+.subAlignTop    { top: calc(-1 * var(--ui-space-1)); }
+.subAlignBottom { bottom: calc(-1 * var(--ui-space-1)); }
+.title {
+  padding: var(--ui-space-1) var(--ui-space-3);
+  border-bottom: 1px solid var(--ui-border-subtle);
+  margin-bottom: var(--ui-space-1);
+  font-size: var(--ui-text-xsmall);
+  color: var(--ui-muted);
+  cursor: default;
+  user-select: none;
+  white-space: nowrap;
+}
+.itemWrapper {
+  position: relative;
+}
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-3);
+  width: 100%;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  background-color: transparent;
+  border: 0;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font);
+  font-size: var(--ui-text-small);
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.item:hover,
+.itemWrapper:hover > .item {
+  background-color: var(--ui-background-1);
+}
+.itemDisabled,
+.itemDisabled:hover {
+  color: var(--ui-muted);
+  background-color: transparent;
+  cursor: default;
+}
+.branchItem {
+  cursor: default;
+}
+.caret {
+  color: var(--ui-muted);
+  font-size: var(--ui-text-xsmall);
+}
+.check {
+  color: var(--ui-muted);
+  font-size: var(--ui-text-small);
+}

package/src/components/Content/Menu/types.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export type MenuLeaf = {
+  label: string;
+  onSelect: () => void;
+  /** Renders a trailing checkmark. Use for one-of-N selections. */
+  isActive?: boolean;
+  /** Dims the item and blocks selection. Hover/keyboard focus still works. */
+  isDisabled?: boolean;
+};
+export type MenuBranch = {
+  label: string;
+  items: MenuItem[];
+};
+export type MenuItem = MenuLeaf | MenuBranch;
+export type MenuProps = {
+  trigger: ReactNode;
+  ariaLabel: string;
+  items: MenuItem[];
+  /** Non-interactive heading rendered at the top of the root panel. */
+  title?: string;
+};

package/src/components/Content/Text/Text.stories.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from './index';
+const meta: Meta<typeof Text> = {
+  title: 'Content/Text',
+  component: Text,
+  argTypes: {
+    size: { control: 'inline-radio', options: ['small', 'medium', 'large'] },
+    as: { control: 'inline-radio', options: ['p', 'span', 'div'] },
+  },
+  args: {
+    children: 'The quick brown fox jumps over the lazy dog.',
+    size: 'medium',
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Text>;
+export const Default: Story = {};
+export const Sizes: Story = {
+  render: () => (
+    <>
+      <Text size="small">Small — The quick brown fox jumps over the lazy dog.</Text>
+      <Text size="medium">Medium — The quick brown fox jumps over the lazy dog.</Text>
+      <Text size="large">Large — The quick brown fox jumps over the lazy dog.</Text>
+    </>
+  ),
+};
+export const Muted: Story = { args: { isMuted: true } };
+export const Mono: Story = {
+  args: { isMono: true, children: 'const answer = 42;' },
+};

package/src/components/Content/Text/index.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import type { TextProps, TextSize } from './types';
+import { cx } from '../../../utils';
+import styles from './styles.module.css';
+const SIZE_MAP: Record<TextSize, string> = {
+  xsmall: styles.xsmall,
+  small: styles.small,
+  medium: styles.medium,
+  large: styles.large,
+};
+export const Text = (props: TextProps) => {
+  const {
+    children,
+    size = 'medium',
+    isMuted,
+    isMono,
+    as: As = 'p',
+  } = props;
+  return (
+    <As
+      className={cx(
+        styles.text,
+        SIZE_MAP[size],
+        isMuted && styles.muted,
+        isMono && styles.mono,
+      )}
+    >
+      {children}
+    </As>
+  );
+};
+export type { TextProps };

package/src/components/Content/Text/styles.module.css ADDED Viewed

@@ -0,0 +1,30 @@
+.text {
+  margin: 0;
+  font-family: var(--ui-font);
+  line-height: var(--ui-line-height);
+  color: var(--ui-foreground);
+}
+.xsmall {
+  font-size: var(--ui-text-xsmall);
+}
+.small {
+  font-size: var(--ui-text-small);
+}
+.medium {
+  font-size: var(--ui-text-medium);
+}
+.large {
+  font-size: var(--ui-text-large);
+}
+.muted {
+  color: var(--ui-muted);
+}
+.mono {
+  font-family: var(--ui-font-mono);
+}

package/src/components/Content/Text/types.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type TextSize = 'xsmall' | 'small' | 'medium' | 'large';
+export type TextProps = {
+  children: ReactNode;
+  size?: TextSize;
+  isMuted?: boolean;
+  isMono?: boolean;
+  as?: 'p' | 'span' | 'div';
+};

package/src/components/Forms/Button/Button.stories.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './index';
+import { Stack } from '../../Layout/Stack';
+const meta: Meta<typeof Button> = {
+  title: 'Forms/Button',
+  component: Button,
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['primary', 'secondary', 'ghost', 'danger'] },
+    size: { control: 'inline-radio', options: ['small', 'medium'] },
+  },
+  args: { children: 'Button', variant: 'secondary', size: 'medium' },
+};
+export default meta;
+type Story = StoryObj<typeof Button>;
+export const Default: Story = {};
+export const Variants: Story = {
+  render: () => (
+    <Stack direction="row" gap={2}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="danger">Danger</Button>
+    </Stack>
+  ),
+};
+export const Sizes: Story = {
+  render: () => (
+    <Stack direction="row" gap={2} align="center">
+      <Button size="small">Small</Button>
+      <Button size="medium">Medium</Button>
+    </Stack>
+  ),
+};
+export const Disabled: Story = { args: { disabled: true } };

package/src/components/Forms/Button/index.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
+import { cx } from '../../../utils';
+import styles from './styles.module.css';
+const VARIANT_MAP: Record<ButtonVariant, string> = {
+  primary: styles.primary,
+  secondary: styles.secondary,
+  ghost: styles.ghost,
+  danger: styles.danger,
+};
+const SIZE_MAP: Record<ButtonSize, string> = {
+  small: styles.small,
+  medium: styles.medium,
+};
+export const Button = (props: ButtonProps) => {
+  const {
+    children,
+    variant = 'secondary',
+    size = 'medium',
+    type = 'button',
+    onClick,
+    disabled,
+    autoFocus,
+    ref,
+  } = props;
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cx(styles.button, VARIANT_MAP[variant], SIZE_MAP[size])}
+      onClick={onClick}
+      disabled={disabled}
+      autoFocus={autoFocus}
+    >
+      {children}
+    </button>
+  );
+};
+export type { ButtonProps };

package/src/components/Forms/Button/styles.module.css ADDED Viewed

@@ -0,0 +1,67 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--ui-font);
+  font-weight: 500;
+  line-height: 1;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  cursor: pointer;
+}
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.small {
+  font-size: var(--ui-text-small);
+  padding: 4px 8px;
+}
+.medium {
+  font-size: var(--ui-text-medium);
+  padding: 6px 12px;
+}
+.secondary {
+  background-color: var(--ui-background-0);
+  color: var(--ui-foreground);
+}
+.secondary:hover:not(:disabled) {
+  background-color: var(--ui-background-1);
+}
+.primary {
+  background-color: var(--ui-accent);
+  color: var(--ui-on-accent);
+  border-color: var(--ui-accent);
+}
+.primary:hover:not(:disabled) {
+  background-color: var(--ui-accent-hover);
+  border-color: var(--ui-accent-hover);
+}
+.ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--ui-foreground);
+}
+.ghost:hover:not(:disabled) {
+  background-color: var(--ui-background-3);
+}
+.danger {
+  background-color: var(--ui-danger);
+  color: var(--ui-on-danger);
+  border-color: var(--ui-danger);
+}
+.danger:hover:not(:disabled) {
+  background-color: var(--ui-danger-hover);
+  border-color: var(--ui-danger-hover);
+}

package/src/components/Forms/Button/types.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { MouseEventHandler, ReactNode, Ref } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'small' | 'medium';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonProps = {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  type?: ButtonType;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  ref?: Ref<HTMLButtonElement>;
+};

package/src/components/Forms/ColorInput/index.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import type { ColorInputProps } from './types';
+import styles from './styles.module.css';
+export const ColorInput = (props: ColorInputProps) => {
+  const { label, value, defaultValue, onChange, disabled, id, name } = props;
+  return (
+    <input
+      type="color"
+      aria-label={label}
+      className={styles.input}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      disabled={disabled}
+      id={id}
+      name={name}
+    />
+  );
+};
+export type { ColorInputProps };

package/src/components/Forms/ColorInput/styles.module.css ADDED Viewed

@@ -0,0 +1,19 @@
+.input {
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background: var(--ui-background-0);
+  padding: 2px;
+  width: 2.25rem;
+  height: 2.25rem;
+  cursor: pointer;
+}
+.input:focus {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: -1px;
+}
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/Forms/ColorInput/types.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { ChangeEventHandler } from 'react';
+export type ColorInputProps = {
+  /** Accessible name for the color picker. Becomes the aria-label. */
+  label: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+  id?: string;
+  name?: string;
+};

package/src/components/Forms/Field/Field.stories.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Field } from './index';
+import { Input } from '../Input';
+const meta: Meta<typeof Field> = {
+  title: 'Forms/Field',
+  component: Field,
+};
+export default meta;
+type Story = StoryObj<typeof Field>;
+export const Default: Story = {
+  render: () => (
+    <Field label="Name">
+      <Input placeholder="Your name" />
+    </Field>
+  ),
+};
+export const WithHint: Story = {
+  render: () => (
+    <Field label="Email" hint="We'll never share it.">
+      <Input type="email" placeholder="you@example.com" />
+    </Field>
+  ),
+};
+export const WithError: Story = {
+  render: () => (
+    <Field label="Email" error="That doesn't look like a valid email.">
+      <Input type="email" defaultValue="not-an-email" />
+    </Field>
+  ),
+};

package/src/components/Forms/Field/index.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import type { FieldProps } from './types';
+import styles from './styles.module.css';
+export const Field = (props: FieldProps) => {
+  const { label, hint, error, children, htmlFor } = props;
+  return (
+    <label className={styles.field} htmlFor={htmlFor}>
+      <span className={styles.label}>{label}</span>
+      {children}
+      {hint && !error && <span className={styles.hint}>{hint}</span>}
+      {error && <span className={styles.error}>{error}</span>}
+    </label>
+  );
+};
+export type { FieldProps };

package/src/components/Forms/Field/styles.module.css ADDED Viewed

@@ -0,0 +1,21 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.label {
+  font-size: var(--ui-text-small);
+  font-weight: 500;
+  color: var(--ui-foreground);
+}
+.hint {
+  font-size: var(--ui-text-xsmall);
+  color: var(--ui-muted);
+}
+.error {
+  font-size: var(--ui-text-xsmall);
+  color: var(--ui-danger);
+}

package/src/components/Forms/Field/types.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type FieldProps = {
+  label: string;
+  hint?: string;
+  error?: string;
+  children: ReactNode;
+  htmlFor?: string;
+};

package/src/components/Forms/IconButton/IconButton.stories.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from './index';
+import type { IconButtonVariant, IconButtonSize } from './types';
+const meta: Meta<typeof IconButton> = {
+  title: 'Forms/IconButton',
+  component: IconButton,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 32 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+const CloseIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <path
+      d="M4 4 L12 12 M12 4 L4 12"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+const PlusIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <path
+      d="M8 3 V13 M3 8 H13"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+const VARIANTS: IconButtonVariant[] = ['ghost', 'solid', 'danger'];
+const SIZES: IconButtonSize[] = ['small', 'medium'];
+export const Default: Story = {
+  render: () => (
+    <IconButton ariaLabel="Close">
+      <CloseIcon />
+    </IconButton>
+  ),
+};
+export const WithTooltip: Story = {
+  render: () => (
+    <IconButton ariaLabel="Close panel" tooltip="Close panel">
+      <CloseIcon />
+    </IconButton>
+  ),
+};
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 16 }}>
+      {VARIANTS.map((variant) => (
+        <IconButton key={variant} ariaLabel={variant} tooltip={variant} variant={variant}>
+          <PlusIcon />
+        </IconButton>
+      ))}
+    </div>
+  ),
+};
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      {SIZES.map((size) => (
+        <IconButton key={size} ariaLabel={size} tooltip={size} size={size}>
+          <PlusIcon />
+        </IconButton>
+      ))}
+    </div>
+  ),
+};
+export const Disabled: Story = {
+  render: () => (
+    <IconButton ariaLabel="Close" tooltip="Cannot close right now" disabled>
+      <CloseIcon />
+    </IconButton>
+  ),
+};