@conscia-labs/design-system 0.2.0

package/dist/chunk-CU3OXBFI.js

@@ -0,0 +1,664 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-YHPZ5CQU.js";
+import {
+  cn
+} from "./chunk-JU5DQXFC.js";
+
+// src/primitives/alert.tsx
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var alertVariants = cva(
+  "relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 rounded-[var(--ds-radius-surface)] border px-4 py-3.5 text-sm [&>svg]:mt-0.5 [&>svg]:size-5",
+  {
+    variants: {
+      variant: {
+        default: "border-border-default bg-card text-foreground",
+        information: "border-information-border bg-information-background text-information-foreground",
+        success: "border-success-border bg-success-background text-success-foreground",
+        warning: "border-warning-border bg-warning-background text-warning-foreground",
+        danger: "border-danger-border bg-danger-background text-danger-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn("font-medium leading-5", className),
+      ...props
+    }
+  );
+}
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn("col-start-2 mt-0.5 text-sm leading-5 opacity-80", className),
+      ...props
+    }
+  );
+}
+
+// src/primitives/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn("flex size-full items-center justify-center rounded-full bg-surface-muted text-xs font-medium text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/primitives/badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-md border px-1.5 py-0.5 text-[var(--ds-metadata)] font-medium leading-4 transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-primary bg-primary text-primary-foreground",
+        accent: "border-selection-border bg-selection-background text-selection-foreground",
+        secondary: "border-neutral-border bg-neutral-background text-neutral-foreground",
+        neutral: "border-neutral-border bg-neutral-background text-neutral-foreground",
+        outline: "border-border-default text-foreground",
+        information: "border-information-border bg-information-background text-information-foreground",
+        info: "border-information-border bg-information-background text-information-foreground",
+        success: "border-success-border bg-success-background text-success-foreground",
+        warning: "border-warning-border bg-warning-background text-warning-foreground",
+        danger: "border-danger-border bg-danger-background text-danger-foreground",
+        destructive: "border-danger-border bg-danger-background text-danger-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3("span", { "data-slot": "badge", className: cn(badgeVariants({ variant, className })), ...props });
+}
+
+// src/primitives/input.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "border-input bg-card flex h-[var(--ds-field-control-height)] w-full min-w-0 rounded-[var(--ds-field-control-radius)] border px-[var(--ds-field-control-padding-x)] py-2 text-base shadow-none transition-colors outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/primitives/switch.tsx
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx5(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+        }
+      )
+    }
+  );
+}
+
+// src/primitives/textarea.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn("min-h-28 w-full rounded-[var(--ds-field-control-radius)] border border-input bg-card px-[var(--ds-field-control-padding-x)] py-3 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50", className),
+      ...props
+    }
+  );
+}
+
+// src/primitives/compat.tsx
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var ConsciaButton = Button;
+function ConsciaIconButton({
+  size = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(Button, { size, ...props });
+}
+var ConsciaCard = Card;
+var ConsciaCardContent = CardContent;
+var ConsciaCardDescription = CardDescription;
+function ConsciaCardHeader({
+  actionRight,
+  className,
+  children,
+  ...props
+}) {
+  if (!actionRight) {
+    return /* @__PURE__ */ jsx7(CardHeader, { className, ...props, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    CardHeader,
+    {
+      className: cn(
+        "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: "grid gap-2", children }),
+        /* @__PURE__ */ jsx7("div", { className: "justify-self-end", children: actionRight })
+      ]
+    }
+  );
+}
+var ConsciaCardTitle = CardTitle;
+var ConsciaCheckbox = Checkbox;
+var ConsciaInput = Input;
+var ConsciaSwitch = Switch;
+var ConsciaTextarea = Textarea;
+var ConsciaSelect = Select;
+var ConsciaSelectContent = SelectContent;
+var ConsciaSelectGroup = SelectGroup;
+var ConsciaSelectItem = SelectItem;
+var ConsciaSelectTrigger = SelectTrigger;
+var ConsciaSelectValue = SelectValue;
+var ConsciaTable = Table;
+var ConsciaTableBody = TableBody;
+var ConsciaTableCell = TableCell;
+var ConsciaTableHeader = TableHeader;
+var ConsciaTableHead = TableHead;
+var ConsciaTableRow = TableRow;
+
+// src/primitives/field.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Field({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "field",
+      className: cn("grid gap-[var(--ds-field-label-gap)]", className),
+      ...props
+    }
+  );
+}
+function FieldGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn("grid gap-[var(--ds-field-gap)]", className),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "label",
+    {
+      "data-slot": "field-label",
+      className: cn("text-[length:var(--ds-field-label-size)] font-medium leading-[var(--ds-field-label-line-height)] text-foreground", className),
+      ...props
+    }
+  );
+}
+function FieldDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn("mt-[var(--ds-field-message-gap)] text-[var(--ds-metadata)] text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function FieldError({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "p",
+    {
+      "data-slot": "field-error",
+      className: cn("mt-[var(--ds-field-message-gap)] text-[var(--ds-metadata)] font-medium text-danger-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/primitives/form-select.tsx
+import * as React from "react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var emptyValue = "__conscia_empty_select_value__";
+function toSelectValue(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return value === "" ? emptyValue : value;
+}
+function fromSelectValue(value) {
+  return value === emptyValue ? "" : value;
+}
+function FormSelect({
+  name,
+  id,
+  value,
+  defaultValue,
+  required,
+  disabled,
+  placeholder,
+  options,
+  className,
+  triggerClassName,
+  contentClassName,
+  onValueChange,
+  onClick,
+  "aria-label": ariaLabel
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const currentValue = value ?? internalValue;
+  function handleValueChange(nextValue) {
+    const actualValue = fromSelectValue(nextValue);
+    if (value === void 0) {
+      setInternalValue(actualValue);
+    }
+    onValueChange?.(actualValue);
+  }
+  return /* @__PURE__ */ jsx9("div", { className: cn("min-w-0", className), onClick, children: /* @__PURE__ */ jsxs2(
+    Select,
+    {
+      name,
+      value: toSelectValue(currentValue),
+      required,
+      disabled,
+      onValueChange: handleValueChange,
+      children: [
+        /* @__PURE__ */ jsx9(SelectTrigger, { id, "aria-label": ariaLabel, className: triggerClassName, children: /* @__PURE__ */ jsx9(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx9(SelectContent, { className: contentClassName, children: /* @__PURE__ */ jsx9(SelectGroup, { children: options.map((option) => /* @__PURE__ */ jsx9(
+          SelectItem,
+          {
+            value: toSelectValue(option.value) ?? emptyValue,
+            disabled: option.disabled,
+            children: option.label
+          },
+          option.value
+        )) }) })
+      ]
+    }
+  ) });
+}
+var ConsciaFormSelect = FormSelect;
+
+// src/primitives/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-[length:var(--ds-field-label-size)] font-medium leading-[var(--ds-field-label-line-height)] text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/primitives/searchable-select.tsx
+import * as React2 from "react";
+import { Check, ChevronsUpDown, Search, X } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+function SearchableSelect({
+  id,
+  name,
+  value = "",
+  options,
+  onValueChange,
+  placeholder = "Select an option",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No matching options.",
+  disabled = false,
+  clearable = false,
+  clearLabel = "Clear selection",
+  optionsLabel,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const generatedId = React2.useId();
+  const listboxId = `${id ?? generatedId}-listbox`;
+  const rootRef = React2.useRef(null);
+  const activeOptionRef = React2.useRef(null);
+  const [open, setOpen] = React2.useState(false);
+  const [search, setSearch] = React2.useState("");
+  const [activeIndex, setActiveIndex] = React2.useState(0);
+  const selected = options.find((option) => option.value === value);
+  const normalizedSearch = search.trim().toLowerCase();
+  const filteredOptions = normalizedSearch ? options.filter(
+    (option) => [option.label, option.description, ...option.keywords ?? []].filter(Boolean).join(" ").toLowerCase().includes(normalizedSearch)
+  ) : options;
+  const enabledIndexes = filteredOptions.reduce((indexes, option, index) => {
+    if (!option.disabled) {
+      indexes.push(index);
+    }
+    return indexes;
+  }, []);
+  const resolvedActiveIndex = enabledIndexes.includes(activeIndex) ? activeIndex : enabledIndexes[0] ?? -1;
+  React2.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function closeWhenOutside(event) {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    }
+    document.addEventListener("pointerdown", closeWhenOutside);
+    return () => document.removeEventListener("pointerdown", closeWhenOutside);
+  }, [open]);
+  React2.useEffect(() => {
+    if (open) {
+      activeOptionRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [open, resolvedActiveIndex]);
+  function select(option) {
+    if (option.disabled) {
+      return;
+    }
+    onValueChange(option.value);
+    setSearch("");
+    setOpen(false);
+  }
+  function onKeyDown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((current) => {
+        const position = enabledIndexes.indexOf(current);
+        return enabledIndexes[Math.min(enabledIndexes.length - 1, position + 1)] ?? -1;
+      });
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((current) => {
+        const position = enabledIndexes.indexOf(current);
+        return enabledIndexes[Math.max(0, position === -1 ? 0 : position - 1)] ?? -1;
+      });
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex(enabledIndexes[0] ?? -1);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex(enabledIndexes.at(-1) ?? -1);
+    } else if (event.key === "Enter" && open && filteredOptions[resolvedActiveIndex]) {
+      event.preventDefault();
+      select(filteredOptions[resolvedActiveIndex]);
+    } else if (event.key === "Escape") {
+      setOpen(false);
+      setSearch("");
+    } else if (event.key === "Tab") {
+      setOpen(false);
+      setSearch("");
+    }
+  }
+  return /* @__PURE__ */ jsxs3("div", { ref: rootRef, "data-slot": "searchable-select", className: cn("relative min-w-0", className), children: [
+    name ? /* @__PURE__ */ jsx11("input", { type: "hidden", name, value }) : null,
+    /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx11(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx11(
+        Input,
+        {
+          id,
+          role: "combobox",
+          "aria-label": ariaLabel,
+          "aria-autocomplete": "list",
+          "aria-expanded": open,
+          "aria-controls": open ? listboxId : void 0,
+          "aria-activedescendant": open && filteredOptions[resolvedActiveIndex] ? `${listboxId}-${resolvedActiveIndex}` : void 0,
+          autoComplete: "off",
+          className: "px-9",
+          disabled,
+          placeholder: open ? searchPlaceholder : placeholder,
+          value: open ? search : selected?.label ?? "",
+          onFocus: (event) => {
+            setOpen(true);
+            setSearch("");
+            event.currentTarget.select();
+          },
+          onClick: () => {
+            if (!open) {
+              setOpen(true);
+              setSearch("");
+            }
+          },
+          onChange: (event) => {
+            setSearch(event.target.value);
+            setOpen(true);
+            setActiveIndex(0);
+          },
+          onKeyDown
+        }
+      ),
+      clearable && value ? /* @__PURE__ */ jsx11(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          disabled,
+          className: "absolute right-8 top-1/2 -translate-y-1/2",
+          "aria-label": clearLabel,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => {
+            onValueChange("");
+            setSearch("");
+          },
+          children: /* @__PURE__ */ jsx11(X, {})
+        }
+      ) : null,
+      /* @__PURE__ */ jsx11(ChevronsUpDown, { className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })
+    ] }),
+    open ? /* @__PURE__ */ jsx11(
+      "div",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": optionsLabel ?? (ariaLabel ? `${ariaLabel} options` : "Options"),
+        className: "absolute z-50 mt-1 max-h-72 w-full overflow-y-auto rounded-md border border-border-subtle bg-popover p-1 text-popover-foreground shadow-md",
+        children: filteredOptions.length ? filteredOptions.map((option, index) => /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            id: `${listboxId}-${index}`,
+            type: "button",
+            role: "option",
+            "aria-selected": option.value === value,
+            "aria-disabled": option.disabled || void 0,
+            disabled: option.disabled,
+            tabIndex: -1,
+            ref: index === resolvedActiveIndex ? activeOptionRef : void 0,
+            "data-active": index === resolvedActiveIndex,
+            className: "flex w-full items-center gap-3 rounded-sm px-3 py-2 text-left text-[length:var(--ds-menu-item-size)] outline-none hover:bg-surface-muted focus-visible:bg-surface-muted data-[active=true]:bg-surface-muted disabled:pointer-events-none disabled:opacity-50",
+            onMouseDown: (event) => event.preventDefault(),
+            onMouseEnter: () => setActiveIndex(index),
+            onClick: () => select(option),
+            children: [
+              /* @__PURE__ */ jsxs3("span", { className: "grid min-w-0 flex-1 gap-0.5", children: [
+                /* @__PURE__ */ jsx11("span", { className: "truncate font-medium", children: option.label }),
+                option.description ? /* @__PURE__ */ jsx11("span", { className: "truncate text-[length:var(--ds-menu-label-size)] text-muted-foreground", children: option.description }) : null
+              ] }),
+              option.value === value ? /* @__PURE__ */ jsx11(Check, { className: "size-4 shrink-0 text-success-foreground", "aria-hidden": "true" }) : null
+            ]
+          },
+          option.value
+        )) : /* @__PURE__ */ jsx11("p", { className: "px-3 py-6 text-center text-[length:var(--ds-menu-item-size)] text-muted-foreground", children: emptyMessage })
+      }
+    ) : null
+  ] });
+}
+
+export {
+  alertVariants,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  badgeVariants,
+  Badge,
+  Input,
+  Switch,
+  Textarea,
+  ConsciaButton,
+  ConsciaIconButton,
+  ConsciaCard,
+  ConsciaCardContent,
+  ConsciaCardDescription,
+  ConsciaCardHeader,
+  ConsciaCardTitle,
+  ConsciaCheckbox,
+  ConsciaInput,
+  ConsciaSwitch,
+  ConsciaTextarea,
+  ConsciaSelect,
+  ConsciaSelectContent,
+  ConsciaSelectGroup,
+  ConsciaSelectItem,
+  ConsciaSelectTrigger,
+  ConsciaSelectValue,
+  ConsciaTable,
+  ConsciaTableBody,
+  ConsciaTableCell,
+  ConsciaTableHeader,
+  ConsciaTableHead,
+  ConsciaTableRow,
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FormSelect,
+  ConsciaFormSelect,
+  Label,
+  SearchableSelect
+};
+//# sourceMappingURL=chunk-CU3OXBFI.js.map