@crewlethq/ui 0.2.0 → 0.4.0

package/dist/chunk-2HQR4U4D.js

@@ -0,0 +1,143 @@
+import { SegmentedControl } from './chunk-6ZFVFA56.js';
+import { LightModeGlyph, ComputerGlyph, DarkModeGlyph } from '@crewlethq/icons/glyphs';
+import { useState, useEffect, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var THEMES = ["system", "light", "dark"];
+var DENSITIES = ["normal", "compact", "comfortable"];
+function read(key, allowed, fallback) {
+  try {
+    const held = globalThis.localStorage?.getItem(key);
+    return allowed.includes(held) ? held : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function write(key, value) {
+  try {
+    globalThis.localStorage?.setItem(key, value);
+  } catch {
+  }
+}
+function root() {
+  return typeof document === "undefined" ? null : document.documentElement;
+}
+function applyTheme(theme) {
+  const el = root();
+  if (!el) return;
+  if (theme === "system") el.removeAttribute("data-theme");
+  else el.setAttribute("data-theme", theme);
+}
+function applyDensity(density) {
+  const el = root();
+  if (!el) return;
+  if (density === "normal") el.removeAttribute("data-density");
+  else el.setAttribute("data-density", density);
+}
+function useThemePreference({
+  storageKey
+}) {
+  const [theme, setTheme] = useState(() => read(storageKey, THEMES, "system"));
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  const choose = useCallback(
+    (next) => {
+      setTheme(next);
+      applyTheme(next);
+      write(storageKey, next);
+    },
+    [storageKey]
+  );
+  return [theme, choose];
+}
+function useDensityPreference({
+  storageKey
+}) {
+  const [density, setDensity] = useState(
+    () => read(storageKey, DENSITIES, "normal")
+  );
+  useEffect(() => {
+    applyDensity(density);
+  }, [density]);
+  const choose = useCallback(
+    (next) => {
+      setDensity(next);
+      applyDensity(next);
+      write(storageKey, next);
+    },
+    [storageKey]
+  );
+  return [density, choose];
+}
+function applyStoredPreferences({ themeKey, densityKey }) {
+  const theme = themeKey ? read(themeKey, THEMES, "system") : "system";
+  const density = densityKey ? read(densityKey, DENSITIES, "normal") : "normal";
+  applyTheme(theme);
+  applyDensity(density);
+  return { theme, density };
+}
+function ThemeSwitcher({
+  storageKey = "crewlet_theme",
+  label = "Theme",
+  lightLabel = "Light",
+  systemLabel = "Follow the system",
+  darkLabel = "Dark",
+  size = "sm",
+  className
+}) {
+  const [theme, choose] = useThemePreference({ storageKey });
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      label,
+      semantics: "radio",
+      size,
+      className,
+      value: theme,
+      onValueChange: choose,
+      options: [
+        { value: "light", icon: /* @__PURE__ */ jsx(LightModeGlyph, {}), srLabel: lightLabel, title: lightLabel },
+        { value: "system", icon: /* @__PURE__ */ jsx(ComputerGlyph, {}), srLabel: systemLabel, title: systemLabel },
+        { value: "dark", icon: /* @__PURE__ */ jsx(DarkModeGlyph, {}), srLabel: darkLabel, title: darkLabel }
+      ]
+    }
+  );
+}
+function DensitySwitcher({
+  storageKey = "crewlet_density",
+  label = "Density",
+  compactLabel = "Compact",
+  normalLabel = "Normal",
+  comfortableLabel = "Comfortable",
+  compactMark = "S",
+  normalMark = "M",
+  comfortableMark = "L",
+  size = "sm",
+  className
+}) {
+  const [density, choose] = useDensityPreference({ storageKey });
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      label,
+      semantics: "radio",
+      size,
+      className,
+      value: density,
+      onValueChange: choose,
+      options: [
+        { value: "compact", label: compactMark, srLabel: compactLabel, title: compactLabel },
+        { value: "normal", label: normalMark, srLabel: normalLabel, title: normalLabel },
+        {
+          value: "comfortable",
+          label: comfortableMark,
+          srLabel: comfortableLabel,
+          title: comfortableLabel
+        }
+      ]
+    }
+  );
+}
+
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference };

package/dist/chunk-2PRH365R.js

@@ -0,0 +1,74 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Checkbox-VGW26YLQ.css';
+import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Checkbox = forwardRef(function Checkbox2({
+  label,
+  description,
+  tone = "default",
+  framed = false,
+  indeterminate = false,
+  onCheckedChange,
+  onChange,
+  className = "",
+  disabled,
+  id,
+  "aria-describedby": describedBy,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const labelId = `${inputId}-label`;
+  const descriptionId = description ? `${inputId}-description` : void 0;
+  const box = useRef(null);
+  const attach = useCallback(
+    (el) => {
+      box.current = el;
+      if (el) el.indeterminate = indeterminate;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref, indeterminate]
+  );
+  useEffect(() => {
+    if (box.current) box.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cx(
+        "crewlet-checkbox",
+        tone === "danger" && "crewlet-checkbox--danger",
+        framed && "crewlet-checkbox--framed",
+        disabled && "is-disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: attach,
+            id: inputId,
+            type: "checkbox",
+            className: "crewlet-checkbox__control",
+            disabled,
+            "aria-labelledby": labelId,
+            "aria-describedby": cx(descriptionId, describedBy) || void 0,
+            onChange: (event) => {
+              onChange?.(event);
+              onCheckedChange?.(event.target.checked);
+            },
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-checkbox__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__label", id: labelId, children: label }),
+          description ? /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__description", id: descriptionId, children: description }) : null
+        ] })
+      ]
+    }
+  );
+});
+
+export { Checkbox };

package/dist/chunk-2ZQMA2WB.js

@@ -0,0 +1,57 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Link-6BEFNMN2.css';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { OpenInNewGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var Link = forwardRef(function Link2({
+  variant = "default",
+  size = "body",
+  external = false,
+  newTabLabel = "(opens in a new tab)",
+  block = false,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = cx(
+    "crewlet-link",
+    `crewlet-link--${variant}`,
+    `crewlet-link--${size}`,
+    block && "crewlet-link--block",
+    className
+  );
+  const externalMark = external ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(OpenInNewGlyph, { className: "crewlet-link__external", size: "sm" }),
+    " ",
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: newTabLabel })
+  ] }) : null;
+  const externalAttributes = external ? { target: "_blank", rel: "noreferrer" } : { target: rest.target, rel: rest.rel };
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("Link with asChild expects exactly one valid React element child.");
+    }
+    const childEl = child;
+    return cloneElement(
+      childEl,
+      {
+        ...rest,
+        ...externalAttributes,
+        className: cx(childEl.props["className"], classes)
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        childEl.props["children"],
+        externalMark
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxs("a", { ...rest, ...externalAttributes, ref, className: classes, children: [
+    children,
+    externalMark
+  ] });
+});
+
+export { Link };