@hellboy/ds 0.1.3 → 0.2.7

package/dist/components/button.d.ts

@@ -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.js';
+
+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 };

package/dist/components/button.js

@@ -0,0 +1,129 @@
+"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/index.ts
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+
+// src/components/button/button.tsx
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("@ariakit/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/button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = import_react2.default.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    children,
+    isLoading = false,
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    iconOnly = false,
+    href,
+    active = false,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const buttonClasses = [
+      "btn",
+      `btn--${variant}`,
+      `btn--${size}`,
+      fullWidth && "btn--full-width",
+      iconOnly && "btn--icon-only",
+      active && "btn--active",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react3.Button,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/components/button.mjs

@@ -0,0 +1,92 @@
+// src/components/button/button.tsx
+import React from "react";
+import { Button as AriakitButton } from "@ariakit/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/button.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    children,
+    isLoading = false,
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    iconOnly = false,
+    href,
+    active = false,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const buttonClasses = [
+      "btn",
+      `btn--${variant}`,
+      `btn--${size}`,
+      fullWidth && "btn--full-width",
+      iconOnly && "btn--icon-only",
+      active && "btn--active",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      isLoading && /* @__PURE__ */ jsx2("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ jsx2("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ jsx2(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ jsx2(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx2(
+      AriakitButton,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

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

@@ -1,69 +1,48 @@
-/**
- * Card Component Styles
- * Flexible card component for content containers
- * 
- * Supports light/dark modes via data-theme or prefers-color-scheme fallback
- * Interactive cards have hover and active states with smooth transitions
- */
-
+/* src/style/components/card/card.css */
 .card {
-  /* Base card styles */
-  background-color: var(--color-bg-1);
+  background-color: var(--color-bg-2);
+  color: var(--color-foreground-1);
   border-radius: 8px;
   padding: var(--spacing-4);
   border: none;
-  transition: box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-base);
+  transition:
+    box-shadow var(--transition-base),
+    transform var(--transition-base),
+    background-color var(--transition-base);
   overflow: visible;
 }
-
 .card--default {
-  /* Default variant - subtle border */
   border: 1px solid var(--color-foreground-2);
   border-color: rgba(0, 0, 0, 0.1);
 }
-
 .card--elevated {
-  /* Elevated variant - shadow */
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
-
 .card--outlined {
-  /* Outlined variant - stronger border */
   border: 2px solid var(--color-foreground-2);
   border-color: rgba(0, 0, 0, 0.15);
 }
-
-/* ===== INTERACTIVE CARD STYLES ===== */
 .card--interactive {
-  /* Interactive styles */
   cursor: pointer;
   user-select: none;
   background-color: var(--color-bg-2);
 }
-
-/* Pointer hover */
 .card--interactive:hover {
   background-color: hsla(0, 0%, var(--lightness-bg-2), 0.8);
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
-
-/* Active / Pressed */
 .card--interactive:active {
   background-color: hsla(0, 0%, var(--lightness-bg-2), 0.9);
   transform: translateY(0);
 }
-
-/* Focus indicator (keyboard navigation) */
 .card--interactive:focus-visible {
   outline: 2px solid var(--color-action-primary);
   outline-offset: 2px;
 }
-
-/* Touch device support: respond to :active without :hover */
 @media (hover: none) and (pointer: coarse) {
   .card--interactive:active {
     background-color: hsla(0, 0%, var(--lightness-bg-2), 0.8);
     transform: translateY(-1px);
   }
-}
+}

package/dist/components/card.d.mts

@@ -0,0 +1,31 @@
+import React__default, { ReactNode } from 'react';
+
+type CardVariant = 'default' | 'elevated' | 'outlined';
+interface CardProps {
+    /**
+     * Visual variant of the card
+     * @default 'default'
+     */
+    variant?: CardVariant;
+    /**
+     * Card content
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether the card should have interactive styling (hover effects, cursor pointer)
+     * Use this to visually indicate a card is clickable, independent of onClick handler
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Click handler for interactive cards
+     */
+    onClick?: () => void;
+}
+declare const Card: React__default.FC<CardProps>;
+
+export { Card, type CardProps, type CardVariant };

package/dist/components/card.d.ts

@@ -0,0 +1,31 @@
+import React__default, { ReactNode } from 'react';
+
+type CardVariant = 'default' | 'elevated' | 'outlined';
+interface CardProps {
+    /**
+     * Visual variant of the card
+     * @default 'default'
+     */
+    variant?: CardVariant;
+    /**
+     * Card content
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether the card should have interactive styling (hover effects, cursor pointer)
+     * Use this to visually indicate a card is clickable, independent of onClick handler
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Click handler for interactive cards
+     */
+    onClick?: () => void;
+}
+declare const Card: React__default.FC<CardProps>;
+
+export { Card, type CardProps, type CardVariant };

package/dist/components/card.js

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/card/index.ts
+var card_exports = {};
+__export(card_exports, {
+  Card: () => Card
+});
+module.exports = __toCommonJS(card_exports);
+
+// src/components/card/card.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Card = ({
+  variant = "default",
+  children,
+  className = "",
+  clickable = false,
+  onClick,
+  ...props
+}) => {
+  const isInteractive = clickable || !!onClick;
+  const cardClasses = [
+    "card",
+    `card--${variant}`,
+    isInteractive && "card--interactive",
+    className
+  ].filter(Boolean).join(" ");
+  const Component = onClick ? "button" : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className: cardClasses,
+      onClick,
+      ...onClick && { type: "button" },
+      ...props,
+      children
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card
+});

package/dist/components/card.mjs

@@ -0,0 +1,32 @@
+// src/components/card/card.tsx
+import { jsx } from "react/jsx-runtime";
+var Card = ({
+  variant = "default",
+  children,
+  className = "",
+  clickable = false,
+  onClick,
+  ...props
+}) => {
+  const isInteractive = clickable || !!onClick;
+  const cardClasses = [
+    "card",
+    `card--${variant}`,
+    isInteractive && "card--interactive",
+    className
+  ].filter(Boolean).join(" ");
+  const Component = onClick ? "button" : "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cardClasses,
+      onClick,
+      ...onClick && { type: "button" },
+      ...props,
+      children
+    }
+  );
+};
+export {
+  Card
+};

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

@@ -1,11 +1,53 @@
-/* Checkbox Component Styles */
+/* 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/checkbox.css */
 .checkbox {
   display: inline-flex;
   flex-direction: column;
   gap: var(--spacing-1);
 }
-
 .checkbox__container {
   display: inline-flex;
   align-items: center;
@@ -13,7 +55,6 @@
   cursor: pointer;
   user-select: none;
 }
-
 .checkbox__input {
   position: absolute;
   opacity: 0;
@@ -21,7 +62,6 @@
   height: 0;
   pointer-events: none;
 }
-
 .checkbox__box {
   position: relative;
   display: inline-flex;
@@ -31,110 +71,78 @@
   border: 2px solid var(--color-foreground-2);
   border-radius: 4px;
   background-color: var(--color-bg-1);
-  transition: all 0.2s ease;
+  transition: all var(--motion-transition-base);
 }
-
 .checkbox__icon {
   color: var(--color-on-primary);
-  transition: opacity 0.2s ease;
+  transition: opacity var(--motion-transition-base);
 }
-
 .checkbox__label {
   font-size: var(--font-size-md);
   color: var(--color-foreground-1);
   line-height: 1.5;
 }
-
-/* Size variants */
 .checkbox--sm .checkbox__box {
   width: 16px;
   height: 16px;
 }
-
 .checkbox--sm .checkbox__label {
   font-size: var(--font-size-sm);
 }
-
 .checkbox--md .checkbox__box {
   width: 20px;
   height: 20px;
 }
-
 .checkbox--lg .checkbox__box {
   width: 24px;
   height: 24px;
 }
-
 .checkbox--lg .checkbox__label {
   font-size: var(--font-size-lg);
 }
-
-/* Checked state */
-.checkbox__input[aria-checked="true"] + .checkbox__box,
+.checkbox__input[aria-checked=true] + .checkbox__box,
 .checkbox__input:checked + .checkbox__box {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
 }
-
-/* Indeterminate state */
-.checkbox__input[aria-checked="mixed"] + .checkbox__box {
+.checkbox__input[aria-checked=mixed] + .checkbox__box {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
 }
-
-/* Focus state */
 .checkbox__input:focus-visible + .checkbox__box {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-
-/* Hover state */
 .checkbox__container:hover .checkbox__box {
   border-color: var(--color-primary);
 }
-
-.checkbox__container:hover .checkbox__input[aria-checked="true"] + .checkbox__box,
+.checkbox__container:hover .checkbox__input[aria-checked=true] + .checkbox__box,
 .checkbox__container:hover .checkbox__input:checked + .checkbox__box,
-.checkbox__container:hover .checkbox__input[aria-checked="mixed"] + .checkbox__box {
-  background-color: HSLA(
-    var(--primary-hue),
-    var(--primary-saturation),
-    calc(var(--primary-lightness) - 5%),
-    1
-  );
+.checkbox__container:hover .checkbox__input[aria-checked=mixed] + .checkbox__box {
+  background-color: HSLA(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 5%), 1);
 }
-
-/* Disabled state */
 .checkbox--disabled .checkbox__container {
   cursor: not-allowed;
   opacity: 0.5;
 }
-
 .checkbox--disabled .checkbox__box {
   background-color: var(--color-bg-2);
   border-color: var(--color-foreground-3);
 }
-
-/* Error state */
 .checkbox--error .checkbox__box {
   border-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
 }
-
 .checkbox--error .checkbox__input:focus-visible + .checkbox__box {
   outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
 }
-
-/* Feedback text */
 .checkbox__feedback {
   padding-left: calc(var(--spacing-2) + 20px);
 }
-
 .checkbox__error-text {
   font-size: var(--font-size-sm);
   color: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
   display: block;
 }
-
 .checkbox__helper-text {
   font-size: var(--font-size-sm);
   color: var(--color-foreground-2);