@keboola/design 3.1.0 → 3.2.0

package/dist/index.cjs

@@ -5973,7 +5973,16 @@ var BadgeRoot = ({
   className,
   children,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, className: cn(badgeRootVariants({ variant, color, className })), children });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ...rest,
+    ref,
+    "data-slot": "badge",
+    className: cn(badgeRootVariants({ variant, color, className })),
+    children
+  }
+);
 var BadgeInner = ({
   ref,
   // root props
@@ -10309,18 +10318,20 @@ var AIGradientsSvg = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", h
 ] }) });
 
 // src/components/ThemeProvider/brandToCssVars.ts
-var brandToCssVars = (brand) => {
-  const vars = {
-    "--color-background": brand.colors.background,
-    "--color-foreground": brand.colors.foreground,
-    "--color-muted": brand.colors.muted,
-    "--color-muted-foreground": brand.colors.mutedForeground,
-    "--color-border": brand.colors.border,
-    "--color-primary": brand.colors.primary,
-    "--color-primary-foreground": brand.colors.primaryForeground,
-    "--color-destructive": brand.colors.destructive,
-    "--color-destructive-foreground": brand.colors.destructiveForeground
-  };
+var brandToCssVars = (brand, resolvedMode) => {
+  const vars = {};
+  const colors8 = resolvedMode === "dark" ? brand.colorsDark : brand.colors;
+  if (colors8) {
+    vars["--color-background"] = colors8.background;
+    vars["--color-foreground"] = colors8.foreground;
+    vars["--color-muted"] = colors8.muted;
+    vars["--color-muted-foreground"] = colors8.mutedForeground;
+    vars["--color-border"] = colors8.border;
+    vars["--color-primary"] = colors8.primary;
+    vars["--color-primary-foreground"] = colors8.primaryForeground;
+    vars["--color-destructive"] = colors8.destructive;
+    vars["--color-destructive-foreground"] = colors8.destructiveForeground;
+  }
   if (brand.radii) {
     vars["--radius-sm"] = brand.radii.sm;
     vars["--radius-md"] = brand.radii.md;
@@ -10328,12 +10339,50 @@ var brandToCssVars = (brand) => {
   }
   return vars;
 };
-var ThemeProvider = ({ brand = brandRegistry.keboola, setBrand, children }) => {
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var systemMode = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+  return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+};
+var ThemeProvider = ({
+  brand = brandRegistry.keboola,
+  setBrand,
+  colorScheme = "light",
+  children
+}) => {
+  const parent = react.use(ThemeContext);
+  const isRoot = parent === null;
+  const [systemResolved, setSystemResolved] = react.useState(systemMode);
+  react.useEffect(() => {
+    if (!isRoot || colorScheme !== "system") return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(DARK_QUERY);
+    const onChange = (event) => setSystemResolved(event.matches ? "dark" : "light");
+    setSystemResolved(mql.matches ? "dark" : "light");
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [isRoot, colorScheme]);
+  const ownMode = colorScheme === "system" ? systemResolved : colorScheme;
+  const resolvedMode = isRoot ? ownMode : parent.resolvedMode;
+  react.useEffect(() => {
+    if (!isRoot || typeof document === "undefined") return;
+    const root = document.documentElement;
+    const previous = root.getAttribute("data-theme");
+    root.setAttribute("data-theme", resolvedMode);
+    return () => {
+      if (root.getAttribute("data-theme") !== resolvedMode) return;
+      if (previous === null) {
+        root.removeAttribute("data-theme");
+      } else {
+        root.setAttribute("data-theme", previous);
+      }
+    };
+  }, [isRoot, resolvedMode]);
   react.useEffect(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     const previousBrand = root.getAttribute("data-brand");
-    const vars = brandToCssVars(brand);
+    const vars = brandToCssVars(brand, resolvedMode);
     const previousValues = {};
     for (const name of Object.keys(vars)) {
       previousValues[name] = root.style.getPropertyValue(name);
@@ -10359,8 +10408,8 @@ var ThemeProvider = ({ brand = brandRegistry.keboola, setBrand, children }) => {
         }
       }
     };
-  }, [brand]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ThemeContext, { value: { brand, setBrand }, children: [
+  }, [brand, resolvedMode]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ThemeContext, { value: { brand, setBrand, colorScheme, resolvedMode }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(AIGradientsSvg, {}),
     children
   ] });
@@ -10374,7 +10423,16 @@ var useTheme = () => {
   }
   return context;
 };
-var ThemeDecorator = ({ brand, children }) => /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { brand, children });
+var useColorScheme = () => {
+  const context = react.use(ThemeContext);
+  if (context === null) {
+    throw new Error(
+      "useColorScheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider colorScheme={...}> from @keboola/design."
+    );
+  }
+  return { colorScheme: context.colorScheme, resolvedMode: context.resolvedMode };
+};
+var ThemeDecorator = ({ brand, colorScheme = "light", children }) => /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { brand, colorScheme, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-bg-background tw-text-foreground", children }) });
 var themeToolbarBrands = [brandRegistry.keboola, brandRegistry.keboolaLegacy, brandRegistry.exampleCustomer];
 var resolveStorybookBrand = (id) => {
   if (typeof id !== "string") return brandRegistry.keboola;
@@ -10630,7 +10688,7 @@ var PageLayout = Object.assign(Root25, {
 // src/blocks/PageHeader/styles.ts
 var titleRowClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-x-3 tw-gap-y-2";
 var titleClass = "tw-m-0 tw-text-3xl tw-font-semibold tw-leading-9 tw-text-foreground tw-break-words";
-var badgesClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-2";
+var badgesClass = "tw-flex tw-flex-wrap tw-items-center tw-gap-2 [&_[data-slot=badge]]:tw-rounded-full [&_[data-slot=badge]]:tw-normal-case [&_[data-slot=badge]]:tw-tracking-normal [&_[data-slot=badge]]:tw-py-0";
 var descriptionClass = "tw-m-0 tw-max-w-[800px] tw-break-words tw-text-sm tw-leading-5 tw-text-muted-foreground";
 var PageHeaderDetail = ({
   ref,
@@ -13118,7 +13176,7 @@ var TableHead = ({ className, ...props }) => {
     "th",
     {
       className: cn(
-        "tw-px-3 tw-py-2 tw-text-left tw-font-medium tw-whitespace-nowrap [&:has([role=checkbox])]:tw-pr-0 [&>[role=checkbox]]:tw-translate-y-[2px]",
+        "tw-px-3 tw-py-2 tw-text-left tw-font-medium tw-whitespace-nowrap [&:has([role=checkbox])]:tw-pr-0 [&>[role=checkbox]]:tw-translate-y-[2px] focus-within:tw-ring-2 focus-within:tw-ring-primary/50",
         className
       ),
       ...props
@@ -13146,7 +13204,17 @@ var TableRow = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("hover:tw-bg-muted/50", className), ...props });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "hover:tw-bg-muted/50 aria-selected:tw-bg-accent aria-selected:hover:tw-bg-accent",
+      className
+    ),
+    ...props
+  }
+);
 var Table = ({
   borderCollapsed = true,
   bordered = false,
@@ -16274,6 +16342,7 @@ exports.themeToolbarBrands = themeToolbarBrands;
 exports.toast = toast;
 exports.useAppForm = useAppForm;
 exports.useAutosizeInput = useAutosizeInput;
+exports.useColorScheme = useColorScheme;
 exports.useInputOtpContext = useInputOtpContext;
 exports.useIsLegacyBrand = useIsLegacyBrand;
 exports.useMergeDiff = useMergeDiff;