Update dependency react-router-dom to v7.13.1

make accent overridable, v0.1.11
add width, v0.1.10
2026-02-23 22:16:46 +00:00 · 2026-02-23 22:59:57 +01:00 · 2026-02-23 19:57:19 +01:00
14 changed files with 123 additions and 39 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@panic/web-ui",
-    "version": "0.1.9",
+    "version": "0.1.11",
    "license": "AGPL-3.0-only",
    "description": "Core components for panic.haus web applications",
    "type": "module",
--- a/src/components/Button.stories.tsx
+++ b/src/components/Button.stories.tsx
@@ -39,6 +39,12 @@ const meta = {
            control: 'inline-radio',
            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
        },
+        width: {
+            description: 'Button width behavior.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
        to: {
            description: 'Navigation path. When set, the component renders a `<Link>`.',
            control: 'text',
@@ -80,6 +86,7 @@ const meta = {
        type: 'solid',
        variant: 'primary',
        size: 'md',
+        width: 'md',
        label: 'Save',
    },
 } satisfies Meta<typeof Button>;
@@ -132,7 +139,7 @@ export const SizeMatrix: Story = {
            <Button {...args} size="sm" label="Small" />
            <Button {...args} size="md" label="Medium" />
            <Button {...args} size="lg" label="Large" />
-            <Button {...args} size="full" label="Full width" />
+            <Button {...args} size="md" width="full" label="Full width" />
        </div>
    ),
 };
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -11,6 +11,7 @@ type ButtonProps = {
    type: ButtonType;
    variant?: ButtonVariant;
    size?: ComponentSize;
+    width?: ComponentSize;
    to?: string;
    htmlType?: NativeButtonType;
    onClick?: MouseEventHandler<HTMLElement>;
@@ -24,14 +25,14 @@ const SIZE_CLASS: Record<ComponentSize, string> = {
    sm: 'h-8 px-3 text-xs',
    md: 'h-10 px-4 text-sm',
    lg: 'h-12 px-5 text-base',
-    full: 'h-10 w-full px-4 text-sm',
+    full: 'h-10 px-4 text-sm',
 };

 const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
    sm: 'h-8 w-8 !p-0',
    md: 'h-10 w-10 !p-0',
    lg: 'h-12 w-12 !p-0',
-    full: 'h-10 w-full !p-0',
+    full: 'h-10 w-10 !p-0',
 };

 const ICON_CLASS: Record<ComponentSize, string> = {
@@ -48,6 +49,13 @@ const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
    full: 'h-5 w-5',
 };

+const WIDTH_CLASS: Record<ComponentSize, string> = {
+    sm: 'max-w-xs',
+    md: '',
+    lg: 'max-w-md',
+    full: 'w-full max-w-none',
+};
+
 const TYPE_CLASS: Record<ButtonType, string> = {
    solid: 'btn-solid',
    outlined: 'btn-outlined',
@@ -73,6 +81,7 @@ export function Button({
    type,
    variant,
    size = 'md',
+    width = 'md',
    to,
    htmlType = 'button',
    onClick,
@@ -87,6 +96,7 @@ export function Button({
        TYPE_CLASS[type],
        VARIANT_CLASS[resolvedVariant],
        isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
+        WIDTH_CLASS[width],
        Icon && label ? 'gap-1.5' : '',
        disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
        className,
--- a/src/components/DatePicker.stories.tsx
+++ b/src/components/DatePicker.stories.tsx
@@ -38,6 +38,12 @@ const meta = {
            control: 'inline-radio',
            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
        },
+        width: {
+            description: 'Input width constraint.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
        layout: {
            description: 'Label/input layout mode.',
            options: ['stacked', 'inline'],
@@ -105,6 +111,7 @@ const meta = {
        type: 'datetime-local',
        value: '',
        size: 'md',
+        width: 'md',
        layout: 'stacked',
    },
 } satisfies Meta<typeof DatePicker>;
@@ -224,6 +231,7 @@ export const SizeMatrix: Story = {
                    {...args}
                    value={value}
                    size="full"
+                    width="full"
                    onChange={(event) => setValue(event.target.value)}
                />
            </div>
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@@ -9,6 +9,7 @@ export type DatePickerProps = {
    placeholder?: string;
    type: DatePickerKind;
    size?: ComponentSize;
+    width?: ComponentSize;
    layout?: Layout;
    value: string;
    name?: string;
@@ -28,6 +29,7 @@ export function DatePicker({
    placeholder = '',
    type,
    size = 'md',
+    width = 'md',
    layout = 'stacked',
    value,
    name,
@@ -41,12 +43,12 @@ export function DatePicker({
    className = '',
    inputClassName = '',
 }: Readonly<DatePickerProps>) {
-    const containerSizeClass = {
+    const containerWidthClass = {
        sm: 'max-w-xs',
        md: 'max-w-sm',
        lg: 'max-w-md',
        full: 'max-w-none',
-    }[size];
+    }[width];

    const inputSizeClass = {
        sm: 'h-8 !text-xs',
@@ -63,7 +65,7 @@ export function DatePicker({

    return (
        <label
-            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
+            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerWidthClass} ${className}`.trim()}
        >
            {label ? <span className={labelClass}>{label}</span> : null}
            <div className={inputWrapperClass}>
--- a/src/components/Dropdown.stories.tsx
+++ b/src/components/Dropdown.stories.tsx
@@ -42,6 +42,12 @@ const meta = {
            control: 'inline-radio',
            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
        },
+        width: {
+            description: 'Control width constraint.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
        layout: {
            description: 'Label/control layout mode.',
            options: ['stacked', 'inline'],
@@ -84,6 +90,7 @@ const meta = {
        value: 'draft',
        choices,
        size: 'md',
+        width: 'md',
        layout: 'stacked',
    },
 } satisfies Meta<typeof Dropdown>;
@@ -147,7 +154,14 @@ export const SizeMatrix: Story = {
                <Dropdown {...args} value={value} size="sm" label="Small" onChange={setValue} />
                <Dropdown {...args} value={value} size="md" label="Medium" onChange={setValue} />
                <Dropdown {...args} value={value} size="lg" label="Large" onChange={setValue} />
-                <Dropdown {...args} value={value} size="full" label="Full" onChange={setValue} />
+                <Dropdown
+                    {...args}
+                    value={value}
+                    size="full"
+                    width="full"
+                    label="Full"
+                    onChange={setValue}
+                />
            </div>
        );
    },
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -14,6 +14,7 @@ type DropdownProps = {
    value: string;
    choices: DropdownChoice[];
    size?: ComponentSize;
+    width?: ComponentSize;
    layout?: DropdownLayout;
    disabled?: boolean;
    required?: boolean;
@@ -28,6 +29,7 @@ export function Dropdown({
    value,
    choices,
    size = 'md',
+    width = 'md',
    layout = 'stacked',
    disabled = false,
    required = false,
@@ -36,12 +38,12 @@ export function Dropdown({
    className = '',
    selectClassName = '',
 }: Readonly<DropdownProps>) {
-    const containerSizeClass = {
+    const containerWidthClass = {
        sm: 'max-w-xs',
        md: 'max-w-sm',
        lg: 'max-w-md',
        full: 'max-w-none',
-    }[size];
+    }[width];

    const selectSizeClass = {
        sm: 'h-8 !text-xs',
@@ -62,7 +64,7 @@ export function Dropdown({

    return (
        <label
-            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
+            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerWidthClass} ${className}`.trim()}
        >
            {label ? <span className={labelClass}>{label}</span> : null}
            <div className={selectWrapperClass}>
--- a/src/components/Form.stories.tsx
+++ b/src/components/Form.stories.tsx
@@ -80,6 +80,7 @@ export const WithActions: Story = {
                        value={title}
                        onChange={(event) => setTitle(event.target.value)}
                        size="full"
+                        width="full"
                    />
                </div>
                <Dropdown
--- a/src/components/InputField.stories.tsx
+++ b/src/components/InputField.stories.tsx
@@ -38,6 +38,12 @@ const meta = {
            control: 'inline-radio',
            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
        },
+        width: {
+            description: 'Input width constraint.',
+            options: ['sm', 'md', 'lg', 'full'],
+            control: 'inline-radio',
+            table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
+        },
        layout: {
            description: 'Label/input layout mode.',
            options: ['stacked', 'inline'],
@@ -107,6 +113,7 @@ const meta = {
        placeholder: 'name@example.com',
        value: '',
        size: 'md',
+        width: 'md',
        layout: 'stacked',
    },
 } satisfies Meta<typeof InputField>;
@@ -229,6 +236,7 @@ export const SizeMatrix: Story = {
                    {...args}
                    value={value}
                    size="full"
+                    width="full"
                    onChange={(event) => setValue(event.target.value)}
                />
            </div>
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -12,6 +12,7 @@ type InputFieldProps = {
    placeholder?: string;
    type: InputKind;
    size?: ComponentSize;
+    width?: ComponentSize;
    layout?: Layout;
    value: string;
    name?: string;
@@ -31,6 +32,7 @@ export function InputField({
    placeholder = '',
    type,
    size = 'md',
+    width = 'md',
    layout = 'stacked',
    value,
    name,
@@ -45,12 +47,12 @@ export function InputField({
    inputClassName = '',
 }: Readonly<InputFieldProps>) {
    const [showPassword, setShowPassword] = useState(false);
-    const containerSizeClass = {
+    const containerWidthClass = {
        sm: 'max-w-xs',
        md: 'max-w-sm',
        lg: 'max-w-md',
        full: 'max-w-none',
-    }[size];
+    }[width];

    const inputSizeClass = {
        sm: 'h-8 !text-xs',
@@ -69,7 +71,7 @@ export function InputField({

    return (
        <label
-            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
+            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerWidthClass} ${className}`.trim()}
        >
            {label ? <span className={labelClass}>{label}</span> : null}
            <div className={inputWrapperClass}>
--- a/src/components/SidebarNavItem.tsx
+++ b/src/components/SidebarNavItem.tsx
@@ -28,7 +28,7 @@ export function SidebarNavItem({
            onClick={onClick}
            className={({ isActive }) =>
                `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
-                    isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
+                    isActive ? 'ui-accent-active' : 'ui-body-secondary hover:bg-zinc-500/15'
                }`
            }
        >
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,6 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

 :root {
+    /* Consumer projects can override these accent tokens after importing @panic/web-ui styles. */
+    --accent-300: 168 155 191;
+    --accent-400: 149 135 173;
+    --accent-500: 125 111 152;
+    --accent-600: 106 93 132;
+    --accent-contrast: 255 255 255;
    --bg-page: #16121a;
    --surface-bg: rgba(24, 24, 27, 0.45);
    --surface-bg-strong: rgba(24, 24, 27, 0.62);
@@ -33,8 +39,8 @@
    --error-border: rgba(252, 165, 165, 0.3);
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-text: #fecaca;
-    --mdx-link: #7d6f98;
-    --mdx-link-hover: #9587ad;
+    --mdx-link: rgb(var(--accent-500));
+    --mdx-link-hover: rgb(var(--accent-400));
    --mdx-inline-code-bg: #27272a;
    --mdx-inline-code-border: #3f3f46;
    --mdx-codeblock-bg: #18181b;
@@ -42,8 +48,8 @@
    --mdx-codeblock-text: #e4e4e7;
    --mdx-codeblock-gutter: #a1a1aa;
    --mdx-codeblock-active: #27272a;
-    --mdx-codeblock-selection: rgba(125, 111, 152, 0.35);
-    --mdx-codeblock-bracket: rgba(125, 111, 152, 0.45);
+    --mdx-codeblock-selection: rgb(var(--accent-500) / 0.35);
+    --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.45);
    --shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45);
 }

@@ -78,8 +84,8 @@
    --error-border: rgba(248, 113, 113, 0.35);
    --error-bg: rgba(254, 226, 226, 0.8);
    --error-text: #991b1b;
-    --mdx-link: #7d6f98;
-    --mdx-link-hover: #6a5d84;
+    --mdx-link: rgb(var(--accent-500));
+    --mdx-link-hover: rgb(var(--accent-600));
    --mdx-inline-code-bg: #f4f4f5;
    --mdx-inline-code-border: #d4d4d8;
    --mdx-codeblock-bg: #ffffff;
@@ -87,7 +93,7 @@
    --mdx-codeblock-text: #18181b;
    --mdx-codeblock-gutter: #71717a;
    --mdx-codeblock-active: #f4f4f5;
-    --mdx-codeblock-selection: rgba(125, 111, 152, 0.22);
-    --mdx-codeblock-bracket: rgba(125, 111, 152, 0.32);
+    --mdx-codeblock-selection: rgb(var(--accent-500) / 0.22);
+    --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.32);
    --shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
 }
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -12,7 +12,12 @@
    appearance: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: var(--text-primary);
-    @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition focus:border-accent-400 focus:ring-2 focus:ring-accent-400/30;
+    @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition;
+}
+
+.field:focus {
+    border-color: rgb(var(--accent-400));
+    box-shadow: 0 0 0 2px rgb(var(--accent-400) / 0.3);
 }

 .field::placeholder {
@@ -55,7 +60,13 @@
 }

 .btn-solid.btn-primary {
-    @apply bg-accent-500 text-white hover:bg-accent-400 disabled:opacity-100;
+    background-color: rgb(var(--accent-500));
+    color: rgb(var(--accent-contrast));
+    @apply disabled:opacity-100;
+}
+
+.btn-solid.btn-primary:hover {
+    background-color: rgb(var(--accent-400));
 }

 .btn-solid.btn-primary:disabled {
@@ -107,16 +118,19 @@
 }

 .btn-outlined.btn-primary {
-    @apply border-accent-500 text-accent-300;
+    border-color: rgb(var(--accent-500));
+    color: rgb(var(--accent-300));
    background-color: transparent;
 }

 .btn-outlined.btn-primary:hover {
-    @apply bg-accent-500/15 text-accent-300;
+    background-color: rgb(var(--accent-500) / 0.15);
+    color: rgb(var(--accent-300));
 }

 .btn-outlined.btn-primary:disabled {
-    @apply border-accent-500/40 text-accent-300/60;
+    border-color: rgb(var(--accent-500) / 0.4);
+    color: rgb(var(--accent-300) / 0.6);
    background-color: transparent;
 }

@@ -149,16 +163,17 @@
 }

 .btn-noborder.btn-primary {
-    @apply text-accent-300;
+    color: rgb(var(--accent-300));
    background-color: transparent;
 }

 .btn-noborder.btn-primary:hover {
-    @apply bg-accent-500/15 text-accent-300;
+    background-color: rgb(var(--accent-500) / 0.15);
+    color: rgb(var(--accent-300));
 }

 .btn-noborder.btn-primary:disabled {
-    @apply text-accent-300/60;
+    color: rgb(var(--accent-300) / 0.6);
    background-color: transparent;
 }

@@ -228,6 +243,15 @@
    color: var(--error-text);
 }

+.ui-accent-active {
+    background-color: rgb(var(--accent-500));
+    color: rgb(var(--accent-contrast));
+}
+
+.ui-accent-active:hover {
+    background-color: rgb(var(--accent-400));
+}
+
 .chip-root {
    @apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none;
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -4161,16 +4161,16 @@ react-remove-scroll@^2.6.3:
    use-sidecar "^1.1.3"

 react-router-dom@^7.0.0:
-  version "7.13.0"
-  resolved "https://nexus.beatrice.wtf/repository/npm-group/react-router-dom/-/react-router-dom-7.13.0.tgz#8b5f7204fadca680f0e94f207c163f0dcd1cfdf5"
-  integrity sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==
+  version "7.13.1"
+  resolved "https://nexus.beatrice.wtf/repository/npm-group/react-router-dom/-/react-router-dom-7.13.1.tgz#74c045acc333ca94612b889cd1b1e1ee9534dead"
+  integrity sha512-UJnV3Rxc5TgUPJt2KJpo1Jpy0OKQr0AjgbZzBFjaPJcFOb2Y8jA5H3LT8HUJAiRLlWrEXWHbF1Z4SCZaQjWDHw==
  dependencies:
-    react-router "7.13.0"
+    react-router "7.13.1"

-react-router@7.13.0:
-  version "7.13.0"
-  resolved "https://nexus.beatrice.wtf/repository/npm-group/react-router/-/react-router-7.13.0.tgz#de9484aee764f4f65b93275836ff5944d7f5bd3b"
-  integrity sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==
+react-router@7.13.1:
+  version "7.13.1"
+  resolved "https://nexus.beatrice.wtf/repository/npm-group/react-router/-/react-router-7.13.1.tgz#5e2b3ebafd6c78d9775e135474bf5060645077f7"
+  integrity sha512-td+xP4X2/6BJvZoX6xw++A2DdEi++YypA69bJUV5oVvqf6/9/9nNlD70YO1e9d3MyamJEBQFEzk6mbfDYbqrSA==
  dependencies:
    cookie "^1.0.1"
    set-cookie-parser "^2.6.0"
Author	SHA1	Message	Date
Renovate Bot	6c7ebd361e	Update dependency react-router-dom to v7.13.1 All checks were successful continuous-integration/drone/pr Build is passing Details	2026-02-23 22:16:46 +00:00
Beatrice Dellacà	5cc3e3646c	make accent overridable, v0.1.11 All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/promote/production Build is passing Details	2026-02-23 22:59:57 +01:00
Beatrice Dellacà	29a4e8c2ee	add width, v0.1.10 All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/promote/production Build is passing Details	2026-02-23 19:57:19 +01:00