@keboola/design 5.0.0 → 6.0.0

package/dist/markdown-editor.js

@@ -511,7 +511,7 @@ var init_Skeleton = __esm({
       "tw-relative",
       "tw-overflow-hidden",
       "tw-pointer-events-none",
-      "tw-bg-muted",
+      "tw-bg-skeleton",
       // before
       'before:tw-content-[""]',
       "before:tw-opacity-100",
@@ -590,11 +590,12 @@ var init_styles = __esm({
         "tw-items-center",
         "tw-justify-center",
         "tw-gap-2",
-        // text
+        // text — chrome weight/tracking are brand-overridable tokens
+        // (`--font-weight-medium` / `--letter-spacing-chrome`); casing stays `tw-uppercase`.
         "tw-text-xs",
         "tw-leading-5",
         "tw-font-medium",
-        "tw-tracking-[1px]",
+        "tw-tracking-chrome",
         "tw-uppercase",
         // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.
         "tw-rounded",
@@ -3426,11 +3427,23 @@ var inputGroupVariants = cva(
         off: ["has-[:is(input,textarea):focus]:!tw-ring-0"]
       },
       variant: {
-        primary: ["tw-bg-white", "has-[:is(input,textarea):disabled]:tw-opacity-40"],
+        primary: [
+          "tw-bg-white",
+          "has-[:is(input,textarea):disabled]:tw-opacity-40",
+          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
+          // accessible path (mirrors the `state="error"` legacy tokens). Higher specificity than
+          // the default focus selector, so it wins without `!important`.
+          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-error-200"
+        ],
         secondary: [
           "tw-bg-neutral-100",
           "tw-border-neutral-100",
-          "has-[:is(input,textarea):disabled]:tw-opacity-40"
+          "has-[:is(input,textarea):disabled]:tw-opacity-40",
+          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-error-200"
         ],
         argo: [
           // argo follows the brand radius token (overrides the static base)
@@ -3441,7 +3454,12 @@ var inputGroupVariants = cva(
           "tw-text-foreground",
           "has-[:is(input,textarea):disabled]:tw-opacity-50",
           // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
-          "has-[:is(input,textarea)[readonly]:focus]:tw-border-neutral-150"
+          "has-[:is(input,textarea)[readonly]:focus]:tw-border-neutral-150",
+          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
+          // accessible path (uses the themeable `destructive` status token).
+          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-destructive",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-destructive",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-destructive/20"
         ]
       },
       sizing: {
@@ -3729,6 +3747,21 @@ var FormGroupColorInput = ({
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsx(ColorInput, { state, ...props, ref });
 };
+
+// src/components/FormGroup/FormGroupError.tsx
+init_utils2();
+var toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
+var FormGroupError = ({ children, className, errors, ...rest }) => {
+  const content = useMemo(() => {
+    if (children) return children;
+    const messages = (errors ?? []).map(toMessage).filter((message) => !!message);
+    if (messages.length === 0) return null;
+    if (messages.length === 1) return messages[0];
+    return /* @__PURE__ */ jsx("ul", { className: "tw-m-0 tw-flex tw-list-disc tw-flex-col tw-gap-0 tw-pl-4", children: messages.map((message, index) => /* @__PURE__ */ jsx("li", { children: message }, index)) });
+  }, [children, errors]);
+  if (!content) return null;
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "alert", className: cn("tw-m-0 tw-text-xs tw-text-destructive", className), children: content });
+};
 var helpVariants = cva(["tw-m-0", "tw-text-xs"], {
   defaultVariants: {
     state: "default"
@@ -3736,18 +3769,17 @@ var helpVariants = cva(["tw-m-0", "tw-text-xs"], {
   variants: {
     state: {
       default: ["tw-text-muted-foreground"],
-      error: ["tw-text-destructive"],
       warning: ["tw-text-warning"]
     }
   }
 });
-var HelpBlock = ({ children, className, state = "default", testId }) => {
+var HelpBlock = ({ children, className, state = "default", ...rest }) => {
   if (!children) return null;
-  return /* @__PURE__ */ jsx("p", { "data-testid": testId, className: helpVariants({ state, className }), children });
+  return /* @__PURE__ */ jsx("p", { ...rest, className: helpVariants({ state, className }), children });
 };
 var FormGroupHelp = ({ children, ...rest }) => {
   const formGroupContext = useFormGroupContext();
-  return /* @__PURE__ */ jsx(HelpBlock, { state: formGroupContext.state, ...rest, children });
+  return /* @__PURE__ */ jsx(HelpBlock, { state: formGroupContext.state === "warning" ? "warning" : "default", ...rest, children });
 };
 var toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
 var NumberInput = ({
@@ -4002,10 +4034,11 @@ var FormGroupTextInput = ({
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsx(TextInput, { state, ...props, ref });
 };
-var FormGroup = ({ className, children, state, testId }) => {
-  return /* @__PURE__ */ jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsx("div", { "data-testid": testId, className: cn("tw-flex tw-flex-col tw-gap-1", className), children }) });
+var FormGroup = ({ className, children, state, ...rest }) => {
+  return /* @__PURE__ */ jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsx("div", { ...rest, className: cn("tw-flex tw-flex-col tw-gap-1", className), children }) });
 };
 FormGroup.Help = FormGroupHelp;
+FormGroup.Error = FormGroupError;
 FormGroup.TextInput = FormGroupTextInput;
 FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
@@ -4013,23 +4046,23 @@ FormGroup.Textarea = FormGroupTextarea;
 
 // src/components/Label/Label.tsx
 init_utils2();
-var Optional = ({ className }) => /* @__PURE__ */ jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
-var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
-  return /* @__PURE__ */ jsx(
-    RLabel.Root,
-    {
-      ...rest,
-      id: id?.toString(),
-      htmlFor: htmlFor?.toString(),
-      className: cn(
-        "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
-        className
-      ),
-      children
-    }
-  );
-};
+var Optional = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
+var Required = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-primary", className), children: "*" });
+var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsx(
+  RLabel.Root,
+  {
+    ...rest,
+    id: id?.toString(),
+    htmlFor: htmlFor?.toString(),
+    className: cn(
+      "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
+      className
+    ),
+    children
+  }
+);
 Label2.Optional = Optional;
+Label2.Required = Required;
 
 // src/components/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx
 init_utils2();