achery-ui 0.9.2 → 0.10.2

package/dist/index.cjs

@@ -1713,7 +1713,7 @@ function Modal({
   title: title2,
   description: description2,
   children,
-  footer: footer3,
+  footer: footer4,
   trigger: trigger3,
   size = "sm",
   scrollable = false,
@@ -1743,7 +1743,7 @@ function Modal({
                   /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { className: closeButton, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "cross", size: 14, "aria-hidden": "true" }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: scrollable ? bodyScrollable : body2, children }),
-                footer3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer, children: footer3 })
+                footer4 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer, children: footer4 })
               ]
             }
           )
@@ -1981,7 +1981,7 @@ var cardHeader = "Card_cardHeader__1uprgrr8";
 function Card({
   variant = "flat",
   padding = "md",
-  header: header2,
+  header: header3,
   marginalia: marginalia2,
   marginaliaSize = 80,
   children,
@@ -1994,7 +1994,7 @@ function Card({
       className: [card({ variant, padding }), className].filter(Boolean).join(" "),
       ...props,
       children: [
-        header2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardHeader, children: header2 }),
+        header3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardHeader, children: header3 }),
         children,
         marginalia2 && /* @__PURE__ */ jsxRuntime.jsx(Marginalia, { glyph: marginalia2, size: marginaliaSize })
       ]
@@ -2092,7 +2092,7 @@ function Sidebar({
   activeId,
   onItemClick,
   renderLink,
-  footer: footer3,
+  footer: footer4,
   collapsed,
   onCollapsedChange,
   mobileOpen,
@@ -2153,7 +2153,7 @@ function Sidebar({
             ),
             searchConfig.kbd && /* @__PURE__ */ jsxRuntime.jsx("span", { children: searchConfig.kbd })
           ] }),
-          footer3 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer2, children: footer3 })
+          footer4 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer2, children: footer4 })
         ] })
       ]
     }
@@ -3275,23 +3275,182 @@ function TypeTag({ type, className }) {
 }
 function MaterialCard({
   intensity = "chrome",
-  header: header2,
-  footer: footer3,
+  header: header3,
+  footer: footer4,
   children,
   className,
   ...props
 }) {
   const classes = ["material", `m-${intensity}`, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, ...props, children: [
-    header2 !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "material__bar", children: [
+    header3 !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "material__bar", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material__mark", "aria-hidden": true }),
-      typeof header2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material__title", children: header2 }) : header2
+      typeof header3 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material__title", children: header3 }) : header3
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "material__body", children }),
-    footer3 !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "material__foot", children: footer3 })
+    footer4 !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "material__foot", children: footer4 })
   ] });
 }
 
+// src/components/DetailRail/DetailRail.css.ts
+var backdrop2 = "DetailRail_backdrop__1hfojcp3";
+var body3 = "DetailRail_body__1hfojcp8";
+var footer3 = "DetailRail_footer__1hfojcp9";
+var header2 = "DetailRail_header__1hfojcp6";
+var headerText = "DetailRail_headerText__1hfojcp7";
+var rail = "DetailRail_rail__1hfojcp4";
+var DetailRail = ({
+  open,
+  onClose,
+  title: title2,
+  eyebrow: eyebrow2,
+  children,
+  footer: footer4,
+  width = 360,
+  className
+}) => {
+  if (!open) return null;
+  const railStyle = { width };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: backdrop2, onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: [rail, className].filter(Boolean).join(" "),
+        style: railStyle,
+        role: "complementary",
+        "aria-label": title2,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: header2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerText, children: [
+              eyebrow2 && /* @__PURE__ */ jsxRuntime.jsx(Eyebrow, { children: eyebrow2 }),
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, children: title2 })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", glyph: "cross", onClick: onClose, "aria-label": "Close" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: body3, children }),
+          footer4 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer3, children: footer4 })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/ColourInput/ColourInput.css.ts
+var prefix = "ColourInput_prefix__1pnau5c4";
+var root3 = "ColourInput_root__1pnau5c0";
+var swatch = "ColourInput_swatch__1pnau5c1";
+var textInput = "ColourInput_textInput__1pnau5c5";
+var textWrapper = "ColourInput_textWrapper__1pnau5c2";
+var textWrapperError = "ColourInput_textWrapperError__1pnau5c3";
+function normalizeHex(raw) {
+  const stripped = raw.replace(/^#+/, "").toLowerCase();
+  if (/^[0-9a-f]{3}$/.test(stripped)) {
+    const [r, g, b] = stripped;
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  if (/^[0-9a-f]{6}$/.test(stripped)) return `#${stripped}`;
+  return null;
+}
+var ColourInput = ({
+  value: value2 = "#000000",
+  onChange,
+  error = false,
+  placeholder = "000000",
+  disabled = false,
+  className,
+  style
+}) => {
+  const [textValue, setTextValue] = react.useState(value2.replace(/^#/, ""));
+  react.useEffect(() => {
+    setTextValue(value2.replace(/^#/, ""));
+  }, [value2]);
+  const handleTextChange = (raw) => {
+    const stripped = raw.replace(/^#+/, "");
+    setTextValue(stripped);
+    if (/^[0-9a-fA-F]{6}$/.test(stripped)) {
+      onChange?.(`#${stripped.toLowerCase()}`);
+    }
+  };
+  const handleTextBlur = () => {
+    const normalized = normalizeHex(textValue);
+    if (normalized) {
+      onChange?.(normalized);
+    } else {
+      setTextValue(value2.replace(/^#/, ""));
+    }
+  };
+  const handleSwatchChange = (hex) => {
+    onChange?.(hex);
+    setTextValue(hex.replace(/^#/, ""));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [root3, className].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "color",
+        value: value2,
+        disabled,
+        onChange: (e) => handleSwatchChange(e.target.value),
+        className: swatch
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [textWrapper, error && textWrapperError].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: prefix, "aria-hidden": "true", children: "#" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: textValue,
+          disabled,
+          onChange: (e) => handleTextChange(e.target.value),
+          onBlur: handleTextBlur,
+          placeholder: placeholder.replace(/^#/, ""),
+          maxLength: 7,
+          className: textInput,
+          "aria-label": "Hex colour",
+          spellCheck: false,
+          autoComplete: "off"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/SegmentedControl/SegmentedControl.css.ts
+var root4 = "SegmentedControl_root__7mno8a0";
+var segment = "SegmentedControl_segment__7mno8a1";
+var segmentActive = "SegmentedControl_segmentActive__7mno8a2";
+var segmentLg = "SegmentedControl_segmentLg__7mno8a4";
+var segmentSm = "SegmentedControl_segmentSm__7mno8a3";
+var SegmentedControl = ({
+  options,
+  value: value2,
+  onChange,
+  size = "md",
+  disabled = false,
+  className
+}) => {
+  const sizeClass = size === "sm" ? segmentSm : size === "lg" ? segmentLg : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [root4, className].filter(Boolean).join(" "), role: "group", children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": opt.value === value2,
+      disabled,
+      onClick: () => onChange(opt.value),
+      className: [
+        segment,
+        sizeClass,
+        opt.value === value2 && segmentActive
+      ].filter(Boolean).join(" "),
+      children: opt.label
+    },
+    opt.value
+  )) });
+};
+
 exports.AcheryProvider = AcheryProvider;
 exports.AppBar = AppBar;
 exports.Avatar = Avatar;
@@ -3300,9 +3459,11 @@ exports.Body = Body;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.ColourInput = ColourInput;
 exports.Combobox = Combobox;
 exports.ConfirmDialogProvider = ConfirmDialogProvider;
 exports.DatePicker = DatePicker;
+exports.DetailRail = DetailRail;
 exports.Display = Display;
 exports.EntityPill = EntityPill;
 exports.Eyebrow = Eyebrow;
@@ -3322,6 +3483,7 @@ exports.Modal = Modal;
 exports.Mono = Mono;
 exports.ProgressBar = ProgressBar;
 exports.SearchInput = SearchInput;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.SingleCombobox = SingleCombobox;