@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/button-group.js

@@ -0,0 +1,180 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/button-group/index.ts
+var button_group_exports = {};
+__export(button_group_exports, {
+  ButtonGroup: () => ButtonGroup
+});
+module.exports = __toCommonJS(button_group_exports);
+
+// src/components/button-group/button-group.tsx
+var import_react2 = __toESM(require("react"));
+
+// src/components/icons/icons.tsx
+var import_react = require("@iconify/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.Icon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/button-group/button-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ButtonGroup = import_react2.default.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    orientation = "horizontal",
+    mode = "single",
+    options,
+    value: externalValue,
+    onChange,
+    fullWidth = false,
+    disabled = false,
+    className
+  }, ref) => {
+    const [internalValue, setInternalValue] = (0, import_react2.useState)(
+      mode === "multiple" ? [] : ""
+    );
+    const currentValue = externalValue !== void 0 ? externalValue : internalValue;
+    const groupClasses = [
+      "btn-group",
+      `btn-group--${variant}`,
+      `btn-group--${size}`,
+      `btn-group--${orientation}`,
+      `btn-group--${mode}`,
+      fullWidth && "btn-group--full-width",
+      disabled && "btn-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const handleSingleChange = (newValue) => {
+      if (disabled) return;
+      if (externalValue === void 0) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    };
+    const handleMultipleChange = (optionValue) => {
+      if (disabled) return;
+      const currentValues = Array.isArray(currentValue) ? currentValue : [];
+      const newValues = currentValues.includes(optionValue) ? currentValues.filter((v) => v !== optionValue) : [...currentValues, optionValue];
+      if (externalValue === void 0) {
+        setInternalValue(newValues);
+      }
+      onChange?.(newValues);
+    };
+    const isOptionSelected = (optionValue) => {
+      if (mode === "multiple") {
+        return Array.isArray(currentValue) && currentValue.includes(optionValue);
+      }
+      return currentValue === optionValue;
+    };
+    if (mode === "single") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: groupClasses, role: "radiogroup", children: options.map((option) => {
+        const isSelected = isOptionSelected(option.value);
+        const isDisabled = disabled || option.disabled;
+        const buttonClasses = [
+          "btn-group__button",
+          isSelected && "btn-group__button--selected",
+          isDisabled && "btn-group__button--disabled"
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isSelected,
+            disabled: isDisabled,
+            className: buttonClasses,
+            onClick: () => handleSingleChange(option.value),
+            children: [
+              option.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: option.icon, size: iconSize, className: "btn-group__icon" }),
+              option.label
+            ]
+          },
+          option.value
+        );
+      }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: groupClasses, role: "group", children: options.map((option) => {
+      const isSelected = isOptionSelected(option.value);
+      const isDisabled = disabled || option.disabled;
+      const buttonClasses = [
+        "btn-group__button",
+        isSelected && "btn-group__button--selected",
+        isDisabled && "btn-group__button--disabled"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": isSelected,
+          disabled: isDisabled,
+          className: buttonClasses,
+          onClick: () => handleMultipleChange(option.value),
+          children: [
+            option.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: option.icon, size: iconSize, className: "btn-group__icon" }),
+            option.label
+          ]
+        },
+        option.value
+      );
+    }) });
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonGroup
+});

package/dist/components/button-group.mjs

@@ -0,0 +1,143 @@
+// src/components/button-group/button-group.tsx
+import React, { useState } from "react";
+
+// src/components/icons/icons.tsx
+import { Icon as IconifyIcon } from "@iconify/react";
+import { jsx } from "react/jsx-runtime";
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    IconifyIcon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/button-group/button-group.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ButtonGroup = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    orientation = "horizontal",
+    mode = "single",
+    options,
+    value: externalValue,
+    onChange,
+    fullWidth = false,
+    disabled = false,
+    className
+  }, ref) => {
+    const [internalValue, setInternalValue] = useState(
+      mode === "multiple" ? [] : ""
+    );
+    const currentValue = externalValue !== void 0 ? externalValue : internalValue;
+    const groupClasses = [
+      "btn-group",
+      `btn-group--${variant}`,
+      `btn-group--${size}`,
+      `btn-group--${orientation}`,
+      `btn-group--${mode}`,
+      fullWidth && "btn-group--full-width",
+      disabled && "btn-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const handleSingleChange = (newValue) => {
+      if (disabled) return;
+      if (externalValue === void 0) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    };
+    const handleMultipleChange = (optionValue) => {
+      if (disabled) return;
+      const currentValues = Array.isArray(currentValue) ? currentValue : [];
+      const newValues = currentValues.includes(optionValue) ? currentValues.filter((v) => v !== optionValue) : [...currentValues, optionValue];
+      if (externalValue === void 0) {
+        setInternalValue(newValues);
+      }
+      onChange?.(newValues);
+    };
+    const isOptionSelected = (optionValue) => {
+      if (mode === "multiple") {
+        return Array.isArray(currentValue) && currentValue.includes(optionValue);
+      }
+      return currentValue === optionValue;
+    };
+    if (mode === "single") {
+      return /* @__PURE__ */ jsx2("div", { ref, className: groupClasses, role: "radiogroup", children: options.map((option) => {
+        const isSelected = isOptionSelected(option.value);
+        const isDisabled = disabled || option.disabled;
+        const buttonClasses = [
+          "btn-group__button",
+          isSelected && "btn-group__button--selected",
+          isDisabled && "btn-group__button--disabled"
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isSelected,
+            disabled: isDisabled,
+            className: buttonClasses,
+            onClick: () => handleSingleChange(option.value),
+            children: [
+              option.icon && /* @__PURE__ */ jsx2(Icon, { name: option.icon, size: iconSize, className: "btn-group__icon" }),
+              option.label
+            ]
+          },
+          option.value
+        );
+      }) });
+    }
+    return /* @__PURE__ */ jsx2("div", { ref, className: groupClasses, role: "group", children: options.map((option) => {
+      const isSelected = isOptionSelected(option.value);
+      const isDisabled = disabled || option.disabled;
+      const buttonClasses = [
+        "btn-group__button",
+        isSelected && "btn-group__button--selected",
+        isDisabled && "btn-group__button--disabled"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": isSelected,
+          disabled: isDisabled,
+          className: buttonClasses,
+          onClick: () => handleMultipleChange(option.value),
+          children: [
+            option.icon && /* @__PURE__ */ jsx2(Icon, { name: option.icon, size: iconSize, className: "btn-group__icon" }),
+            option.label
+          ]
+        },
+        option.value
+      );
+    }) });
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+export {
+  ButtonGroup
+};

package/{src/style/components/button → dist/components}/button.css

@@ -1,16 +1,48 @@
-/**
- * Button Component Styles
- * Classes: btn, btn--{variant}, btn--{size}
- * 
- * Uses semantic action color tokens:
- * - var(--color-action-primary): primary CTA button color
- * - var(--color-action-primary-hover): hover state
- * - var(--color-action-primary-active): active/pressed state
- * - var(--color-action-primary-disabled): disabled state
- * 
- * Supports both pointer (hover) and touch (:active) interfaces
- */
+/* src/style/components/icons/icons.css */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon--skeleton {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.06) 0%,
+      rgba(0, 0, 0, 0.03) 50%,
+      rgba(0, 0, 0, 0.06) 100%);
+  border-radius: 4px;
+  animation: hb-skeleton 1.2s ease-in-out infinite;
+}
+@keyframes hb-skeleton {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.icon {
+  display: inline-block;
+  flex-shrink: 0;
+  transition: color var(--transition-base, 0.2s ease);
+}
+.icon--interactive {
+  cursor: pointer;
+  color: var(--color-foreground-1);
+}
+.icon--interactive:hover:not(:disabled) {
+  color: var(--color-action-primary-hover);
+}
+.icon--interactive:active:not(:disabled) {
+  color: var(--color-action-primary-active);
+}
+.icon--interactive:disabled {
+  cursor: not-allowed;
+  color: var(--color-foreground-2);
+}
 
+/* src/style/components/button/button.css */
 .btn {
   position: relative;
   display: inline-flex;
@@ -22,203 +54,171 @@
   user-select: none;
   border-radius: var(--radius-base);
   border: 1px solid transparent;
+  font-family: var(--font-family-action);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-normal);
   letter-spacing: var(--letter-spacing-normal);
   transition: var(--motion-transition-hover-in), transform var(--motion-duration-fast) var(--motion-easing-linear);
   cursor: pointer;
 }
-
 .btn:not(:hover):not(:active) {
   transition: var(--motion-transition-hover-out), transform var(--motion-duration-fast) var(--motion-easing-accelerate);
 }
-
-/* Sizes */
 .btn--xs {
   padding: var(--spacing-1);
   font-size: var(--font-size-xs);
 }
-
 .btn--sm {
   padding: var(--spacing-2) var(--spacing-3);
   font-size: var(--font-size-sm);
   min-height: 32px;
 }
-
 .btn--md {
   padding: var(--spacing-2) var(--spacing-4);
   font-size: var(--font-size-base);
   min-height: 40px;
 }
-
 .btn--lg {
   padding: var(--spacing-3) var(--spacing-6);
   font-size: var(--font-size-lg);
   min-height: 48px;
 }
-
-/* Icon only variant */
 .btn--icon-only {
   padding: var(--spacing-2);
   width: auto;
   aspect-ratio: 1;
 }
-
 .btn--icon-only.btn--xs {
   padding: var(--spacing-1);
   min-width: 24px;
   min-height: 24px;
 }
-
 .btn--icon-only.btn--sm {
   padding: var(--spacing-1);
   min-width: 32px;
   min-height: 32px;
 }
-
 .btn--icon-only.btn--md {
   padding: var(--spacing-2);
   min-width: 40px;
   min-height: 40px;
 }
-
 .btn--icon-only.btn--lg {
   padding: var(--spacing-3);
   min-width: 48px;
   min-height: 48px;
 }
-
-/* ===== PRIMARY VARIANT ===== */
+.btn--active {
+  background-color: var(--color-accent);
+  color: var(--color-on-accent);
+}
+.btn--active:hover:not(:disabled) {
+  background-color: var(--color-accent-hover);
+  color: var(--color-on-accent);
+}
+.btn--active:active:not(:disabled) {
+  background-color: var(--color-accent-active);
+  color: var(--color-on-accent);
+}
 .btn--primary {
   background-color: var(--color-action-primary);
-  outline: 0px solid  var(--color-action-primary);
+  outline: 0px solid var(--color-action-primary);
   box-shadow: 0 0 0 0 var(--color-action-primary);
   color: var(--color-on-action-primary);
 }
-
-/* Pointer hover */
 .btn--primary:hover:not(:disabled) {
   background-color: var(--color-action-primary-hover);
   box-shadow: 0 0 0 2px var(--color-action-primary-hover);
-  outline: 2px solid  var(--color-action-primary-hover);
+  outline: 2px solid var(--color-action-primary-hover);
 }
-
-/* Keyboard/Touch active */
 .btn--primary:active:not(:disabled) {
   background-color: var(--color-action-primary-active);
   transform: scale(0.98);
 }
-
-/* Focus indicator (keyboard navigation) */
 .btn--primary:focus-visible:not(:disabled) {
   outline: 2px solid var(--color-action-primary);
   outline-offset: 2px;
 }
-
-/* ===== SECONDARY VARIANT ===== */
 .btn--secondary {
   background-color: var(--color-action-secondary);
   color: var(--color-on-action-secondary);
 }
-
 .btn--secondary:hover:not(:disabled) {
   background-color: var(--color-action-secondary-hover);
 }
-
 .btn--secondary:active:not(:disabled) {
   background-color: var(--color-action-secondary-active);
   transform: scale(0.98);
 }
-
 .btn--secondary:focus-visible:not(:disabled) {
   outline: 2px solid var(--color-action-secondary);
   outline-offset: 2px;
 }
-
-/* ===== TERTIARY VARIANT (Outline) ===== */
 .btn--tertiary {
   background-color: transparent;
   color: var(--color-foreground-2);
   border-color: var(--color-action-tertiary);
   border-width: 2px;
 }
-
 .btn--tertiary:hover:not(:disabled) {
   background-color: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-hover), 0.2);
   border-color: var(--color-action-primary-hover);
   color: var(--color-foreground-2);
 }
-
 .btn--tertiary:active:not(:disabled) {
   background-color: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-active), 0.2);
   border-color: var(--color-action-primary-active);
   color: var(--color-action-primary-active);
   transform: scale(0.98);
 }
-
 .btn--tertiary:focus-visible:not(:disabled) {
   outline: 2px solid var(--color-action-primary);
   outline-offset: 2px;
 }
-
-/* ===== GHOST VARIANT (Transparent Outline) ===== */
 .btn--ghost {
   background-color: transparent;
   color: var(--color-foreground-2);
   border-color: transparent;
   border-width: 2px;
 }
-
 .btn--ghost:hover:not(:disabled) {
   background-color: transparent;
   border-color: var(--color-action-primary-hover);
   color: var(--color-foreground-2);
 }
-
 .btn--ghost:active:not(:disabled) {
   background-color: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-active), 0.2);
   border-color: var(--color-action-primary-active);
   color: var(--color-action-primary-active);
   transform: scale(0.98);
 }
-
 .btn--ghost:focus-visible:not(:disabled) {
   outline: 2px solid var(--color-action-primary);
   outline-offset: 2px;
 }
-
-/* ===== DISABLED STATE (All Variants) ===== */
 .btn:disabled {
   background-color: var(--color-primary-disabled);
   color: var(--color-foreground-2);
   cursor: not-allowed;
   border-color: var(--color-primary-disabled);
 }
-
-/* ===== UTILITY CLASSES ===== */
 .btn--full-width {
   width: 100%;
 }
-
-/* Touch device support: no hover on touchscreen */
 @media (hover: none) and (pointer: coarse) {
   .btn--primary:active:not(:disabled) {
     background-color: var(--color-primary-active);
   }
-
   .btn--secondary:active:not(:disabled) {
     background-color: var(--color-secondary-active);
   }
-
   .btn--tertiary:active:not(:disabled) {
     background-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-active), 0.2);
   }
-
   .btn--ghost:active:not(:disabled) {
     background-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-active), 0.2);
   }
 }
-
 .btn__spinner {
   display: inline-block;
   width: 16px;
@@ -228,15 +228,12 @@
   border-top-color: transparent;
   animation: btn-spin 0.6s linear infinite;
 }
-
 .btn__icon {
   flex-shrink: 0;
 }
-
 .btn__icon-placeholder {
   flex-shrink: 0;
 }
-
 @keyframes btn-spin {
   to {
     transform: rotate(360deg);

package/dist/components/button.d.mts

@@ -0,0 +1,57 @@
+import React__default, { ReactNode } from 'react';
+import { ButtonProps as ButtonProps$1 } from '@ariakit/react';
+import { a as IconName } from '../icons-Czahnf-r.mjs';
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<ButtonProps$1, 'children'> {
+    /**
+     * Visual variant of the button
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size of the button
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+    /**
+     * Whether the button is in a loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Full width button
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display at the start of the button
+     */
+    startIcon?: IconName;
+    /**
+     * Icon to display at the end of the button
+     */
+    endIcon?: IconName;
+    /**
+     * Whether the button should only display an icon (no text)
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * URL to navigate to when button is clicked (makes it work like a link)
+     */
+    href?: string;
+    /**
+     * Whether the button is in an active/selected state
+     * @default false
+     */
+    active?: boolean;
+}
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };