@strapi/design-system 2.2.3 → 2.3.0-alpha.0

package/dist/next/components/ui/button.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "outline" | "default" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const Button: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/button').ButtonProps & VariantProps<(props?: ({
+    variant?: "link" | "outline" | "default" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/next/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/next/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,QAAA,MAAM,cAAc;;;8EAkCnB,CAAC;AAEF,QAAA,MAAM,MAAM;;;iIAWX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/next/components/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './button';
+//# sourceMappingURL=index.d.ts.map

package/dist/next/components/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/next/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/ui';
+export * from '../hooks/useColorScheme';
+export { cn } from './lib/utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/next/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/next/index.ts"],"names":[],"mappings":"AAOA,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC"}

package/dist/next/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../useColorScheme-_G9Tqp-s.cjs"),s=require("clsx"),u=require("tailwind-merge"),c=require("react/jsx-runtime"),l=require("react"),g=require("@base-ui/react/button"),p=require("class-variance-authority");function v(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const b=v(l);function i(...e){return u.twMerge(s.clsx(e))}const a=p.cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/80",outline:"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",secondary:"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",ghost:"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",destructive:"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",xs:"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",lg:"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",icon:"size-9","icon-xs":"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md","icon-lg":"size-10"}},defaultVariants:{variant:"default",size:"default"}}),m=b.forwardRef(({className:e,variant:t="default",size:r="default",...n},o)=>c.jsx(g.Button,{ref:o,"data-slot":"button",className:i(a({variant:t,size:r,className:e})),...n}));exports.useColorScheme=d.useColorScheme;exports.Button=m;exports.buttonVariants=a;exports.cn=i;

package/dist/next/index.mjs

@@ -0,0 +1,55 @@
+import { u as y } from "../useColorScheme-CkO08j1W.js";
+import { clsx as n } from "clsx";
+import { twMerge as d } from "tailwind-merge";
+import { jsx as o } from "react/jsx-runtime";
+import * as s from "react";
+import { Button as u } from "@base-ui/react/button";
+import { cva as l } from "class-variance-authority";
+function c(...e) {
+  return d(n(e));
+}
+const p = l(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), x = s.forwardRef(
+  ({ className: e, variant: r = "default", size: t = "default", ...i }, a) => /* @__PURE__ */ o(
+    u,
+    {
+      ref: a,
+      "data-slot": "button",
+      className: c(p({ variant: r, size: t, className: e })),
+      ...i
+    }
+  )
+);
+export {
+  x as Button,
+  p as buttonVariants,
+  c as cn,
+  y as useColorScheme
+};

package/dist/next/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/next/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/next/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/next/styles.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--spacing:.4rem;--container-3xs:25.6rem;--container-2xs:28.8rem;--container-xs:32rem;--container-sm:38.4rem;--container-md:44.8rem;--container-lg:51.2rem;--container-xl:57.6rem;--container-2xl:67.2rem;--container-3xl:76.8rem;--container-4xl:89.6rem;--container-5xl:102.4rem;--container-6xl:115.2rem;--container-7xl:128rem;--text-xs:1.2rem;--text-xs--line-height:calc(1 / .75);--text-sm:1.4rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1.6rem;--text-base--line-height: 1.5 ;--text-lg:1.8rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:2rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:2.4rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:3rem;--text-3xl--line-height: 1.2 ;--text-4xl:3.6rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:4.8rem;--text-5xl--line-height:1;--text-6xl:6rem;--text-6xl--line-height:1;--text-7xl:7.2rem;--text-7xl--line-height:1;--text-8xl:9.6rem;--text-8xl--line-height:1;--text-9xl:12.8rem;--text-9xl--line-height:1;--font-weight-medium:500;--radius-xs:calc(var(--radius) * .4);--radius-sm:calc(var(--radius) * .6);--radius-md:calc(var(--radius) * .8);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) * 1.4);--radius-2xl:calc(var(--radius) * 1.8);--radius-3xl:calc(var(--radius) * 2.2);--radius-4xl:calc(var(--radius) * 2.6);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--text-2xs:1.1rem;--text-2xs--line-height:calc(1 / .6875)}}.inline-flex{display:inline-flex}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.shrink-0{flex-shrink:0}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.rounded-\[min\(var\(--radius-md\)\,8px\)\]{border-radius:min(var(--radius-md),8px)}.rounded-\[min\(var\(--radius-md\)\,10px\)\]{border-radius:min(var(--radius-md),10px)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--border)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-clip-padding{background-clip:padding-box}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-destructive{color:var(--destructive)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover{background-color:color-mix(in oklch,var(--secondary),var(--foreground) 5%)}}.hover\:bg-destructive\/20:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/20:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.hover\:bg-muted:hover{background-color:var(--muted)}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab,var(--primary) 80%,transparent)}}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border-destructive\/40:focus-visible{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:border-destructive\/40:focus-visible{border-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-3:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]){--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-md{border-radius:var(--radius-md)}.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 1.5)}.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 2)}.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 1.5)}.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 2)}.aria-expanded\:bg-muted[aria-expanded=true]{background-color:var(--muted)}.aria-expanded\:bg-secondary[aria-expanded=true]{background-color:var(--secondary)}.aria-expanded\:text-foreground[aria-expanded=true]{color:var(--foreground)}.aria-expanded\:text-secondary-foreground[aria-expanded=true]{color:var(--secondary-foreground)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-3[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.dark\:border-input:is(.dark *){border-color:var(--input)}.dark\:bg-destructive\/20:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-destructive\/20:is(.dark *){background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab,var(--input) 30%,transparent)}}@media (hover:hover){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:color-mix(in oklab,var(--destructive) 30%,transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input) 50%,transparent)}}.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive) 50%,transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}:root{--background:oklch(100% 0 0);--foreground:oklch(33% .047 283);--muted:oklch(97.4% .004 286);--muted-foreground:oklch(52.3% .052 284);--primary:oklch(53% .262 273.6);--primary-foreground:oklch(100% 0 0);--secondary:oklch(95.9% .02 285);--secondary-foreground:oklch(43.7% .266 269.3);--card:oklch(100% 0 0);--card-foreground:oklch(33% .047 283);--popover:oklch(100% 0 0);--popover-foreground:oklch(33% .047 283);--accent:oklch(95.9% .02 285);--accent-foreground:oklch(33% .047 283);--border:oklch(93.8% .007 286);--input:oklch(93.8% .007 286);--ring:oklch(53% .262 273.6);--destructive:oklch(55.8% .202 29.2);--success:oklch(53.7% .116 150);--warning:oklch(68.6% .142 59.6);--notice:oklch(56.3% .249 304);--chart-1:oklch(58.3% .23 277);--chart-2:oklch(71% .127 181.6);--chart-3:oklch(90.1% .073 71);--chart-4:oklch(91% .093 180);--chart-5:oklch(90.3% .073 320);--sidebar:oklch(97.4% .004 286);--sidebar-foreground:oklch(33% .047 283);--sidebar-primary:oklch(53% .262 273.6);--sidebar-primary-foreground:oklch(100% 0 0);--sidebar-accent:oklch(93.8% .007 286);--sidebar-accent-foreground:oklch(25.7% .036 284);--sidebar-border:oklch(93.8% .007 286);--sidebar-ring:oklch(53% .262 273.6);--radius:5px}.dark{--background:oklch(25.7% .035 284);--foreground:oklch(100% 0 0);--muted:oklch(21.6% .027 284);--muted-foreground:oklch(73% .03 285.6);--primary:oklch(64.5% .193 280);--primary-foreground:oklch(100% 0 0);--secondary:oklch(33% .047 283);--secondary-foreground:oklch(100% 0 0);--card:oklch(25.7% .035 284);--card-foreground:oklch(100% 0 0);--popover:oklch(25.7% .035 284);--popover-foreground:oklch(100% 0 0);--accent:oklch(33% .047 283);--accent-foreground:oklch(100% 0 0);--border:oklch(42.3% .053 284);--input:oklch(42.3% .053 284);--ring:oklch(64.5% .193 280);--destructive:oklch(66.6% .18 28);--success:oklch(69% .12 152);--warning:oklch(76.6% .145 64.3);--notice:oklch(66.3% .172 305);--chart-1:oklch(80.7% .1 250.4);--chart-2:oklch(89.8% .1965 126.7);--chart-3:oklch(83.7% .117 66.3);--chart-4:oklch(85.5% .125 181);--chart-5:oklch(83.3% .132 321.4);--sidebar:oklch(21.6% .027 284);--sidebar-foreground:oklch(100% 0 0);--sidebar-primary:oklch(64.5% .193 280);--sidebar-primary-foreground:oklch(100% 0 0);--sidebar-accent:oklch(33% .047 283);--sidebar-accent-foreground:oklch(100% 0 0);--sidebar-border:oklch(42.3% .053 284);--sidebar-ring:oklch(64.5% .193 280)}@layer base{html{font-size:62.5%}*,:before,:after{box-sizing:border-box}button,input,select,textarea{font:inherit;color:inherit;background-color:#0000}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}

package/dist/useColorScheme-CkO08j1W.js

@@ -0,0 +1,11 @@
+import { useEffect as t, useLayoutEffect as o } from "react";
+const n = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), s = n() ? t : o, i = (e) => {
+  s(() => {
+    document.documentElement.classList.toggle("dark", e === "dark");
+  }, [e]);
+};
+export {
+  s as a,
+  n as i,
+  i as u
+};

package/dist/useColorScheme-_G9Tqp-s.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react"),o=()=>typeof window>"u"||!window.navigator||/ServerSideRendering|^Deno\//.test(window.navigator.userAgent),s=o()?t.useEffect:t.useLayoutEffect,n=e=>{s(()=>{document.documentElement.classList.toggle("dark",e==="dark")},[e])};exports.isSSR=o;exports.useColorScheme=n;exports.useIsomorphicLayoutEffect=s;

package/dist/utilities/DesignSystemProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DesignSystemProvider.d.ts","sourceRoot":"","sources":["../../src/utilities/DesignSystemProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAiB,MAAM,mBAAmB,CAAC;AAsBhE,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAiB,eAAe,oDAE9B,CAAC;AAEH,UAAU,yBAA0B,SAAQ,OAAO,CAAC,wBAAwB,CAAC;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,oBAAoB,gDAKvB,yBAAyB,4CAmC3B,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC;AACjD,YAAY,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"DesignSystemProvider.d.ts","sourceRoot":"","sources":["../../src/utilities/DesignSystemProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAiB,MAAM,mBAAmB,CAAC;AAuBhE,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAiB,eAAe,oDAE9B,CAAC;AAEH,UAAU,yBAA0B,SAAQ,OAAO,CAAC,wBAAwB,CAAC;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,oBAAoB,gDAKvB,yBAAyB,4CAsC3B,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC;AACjD,YAAY,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/utilities/DesignSystemProvider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DesignSystemProvider.test.d.ts.map

package/dist/utilities/DesignSystemProvider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignSystemProvider.test.d.ts","sourceRoot":"","sources":["../../src/utilities/DesignSystemProvider.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "2.2.3",
+  "version": "2.3.0-alpha.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -8,15 +8,45 @@
     "url": "git+https://github.com/strapi/design-system.git",
     "directory": "packages/design-system"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "source": "./src/index.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.mjs",
+      "require": "./dist/next/index.js",
+      "default": "./dist/next/index.mjs"
+    },
+    "./next/styles.css": "./dist/next/styles.css",
+    "./next/source.css": "./src/next/source.css",
+    "./dist/*": {
+      "types": [
+        "./dist/*",
+        "./dist/*.d.ts",
+        "./dist/*/index.d.ts"
+      ],
+      "default": "./dist/*"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
-    "dist"
+    "dist",
+    "src/next/theme.css",
+    "src/next/source.css"
   ],
   "dependencies": {
+    "@base-ui/react": "1.7.0",
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/state": "6.7.1",
     "@codemirror/view": "6.43.0",
@@ -40,31 +70,44 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/react-use-callback-ref": "1.0.1",
-    "@strapi/ui-primitives": "2.2.3",
+    "@strapi/ui-primitives": "2.3.0-alpha.0",
     "@tanstack/react-virtual": "^3.10.8",
     "@uiw/react-codemirror": "4.22.2",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
     "lodash": "4.18.1",
-    "react-remove-scroll": "2.5.10"
+    "react-remove-scroll": "2.5.10",
+    "tailwind-merge": "3.6.0"
   },
   "devDependencies": {
-    "@strapi/icons": "2.2.3",
+    "@strapi/icons": "2.3.0-alpha.0",
+    "@tailwindcss/node": "4.3.3",
+    "@tailwindcss/vite": "4.3.3",
     "@types/lodash": "^4.17.23",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "jest": "29.7.0",
+    "postcss": "8.5.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "5.0.7",
     "styled-components": "6.1.11",
+    "tailwindcss": "4.3.3",
     "typescript": "5.4.5",
     "vite": "^5.4.21",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-externalize-deps": "^0.8.0"
   },
   "peerDependencies": {
-    "@strapi/icons": "^2.0.0 || ^2.0.0-beta || ^2.0.0-alpha",
+    "@strapi/icons": "^2.0.0 || ^2.0.0-beta || ^2.0.0-alpha || ^2.3.0-alpha",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "styled-components": "^6.0.0"
+    "styled-components": "^6.0.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "vite build",

package/src/next/source.css

@@ -0,0 +1,14 @@
+/*
+ * The Tailwind entry for @strapi/design-system/next
+ *
+ * A consumer imports this file and their build must process it.
+ * The bare `tailwindcss/*` imports resolve from the copy of Tailwind that build owns, which is why we declare it as a peer dependency.
+ */
+
+@import '@strapi/design-system/next/styles.css';
+@import 'tailwindcss/theme.css' theme(reference);
+@import './theme.css' theme(reference);
+/* `source(none)` keeps automatic scanning off, because this package cannot know the file paths of a
+   consumer. A consumer must add their own `@source`, and Tailwind resolves that path from the file
+   that holds the line */
+@import 'tailwindcss/utilities.css' source(none);

package/src/next/theme.css

@@ -0,0 +1,108 @@
+/*
+ * The design tokens for @strapi/design-system/next
+ *
+ * Published from `src` (i.e. uncompiled) so `source.css` can import it as a theme reference.
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme static {
+  /* The root font size rule makes 1rem 10px, so these override the Tailwind defaults multiplied by 1.6.
+     Remove them with styled-components */
+  --spacing: 0.4rem;
+
+  --text-2xs: 1.1rem; /* Ours, no Tailwind default. It stays */
+  --text-xs: 1.2rem;
+  --text-sm: 1.4rem;
+  --text-base: 1.6rem;
+  --text-lg: 1.8rem;
+  --text-xl: 2rem;
+  --text-2xl: 2.4rem;
+  --text-3xl: 3rem; /* near alpha mobile (28px) */
+  --text-4xl: 3.6rem; /* near alpha desktop (32px) */
+  --text-5xl: 4.8rem;
+  --text-6xl: 6rem;
+  --text-7xl: 7.2rem;
+  --text-8xl: 9.6rem;
+  --text-9xl: 12.8rem;
+
+  /* Tailwind emits a stock line height only for a step that this package uses, so we declare all of them.
+     A line height is a ratio, so the 1.6 factor does not apply */
+  --text-2xs--line-height: calc(1 / 0.6875);
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl--line-height: 1;
+  --text-6xl--line-height: 1;
+  --text-7xl--line-height: 1;
+  --text-8xl--line-height: 1;
+  --text-9xl--line-height: 1;
+
+  --container-3xs: 25.6rem;
+  --container-2xs: 28.8rem;
+  --container-xs: 32rem;
+  --container-sm: 38.4rem;
+  --container-md: 44.8rem;
+  --container-lg: 51.2rem;
+  --container-xl: 57.6rem;
+  --container-2xl: 67.2rem;
+  --container-3xl: 76.8rem;
+  --container-4xl: 89.6rem;
+  --container-5xl: 102.4rem;
+  --container-6xl: 115.2rem;
+  --container-7xl: 128rem;
+
+  --radius-xs: calc(var(--radius) * 0.4);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-notice: var(--notice);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}