@hellboy/ds 0.1.2 → 0.2.7

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

@@ -1,73 +1,57 @@
-/**
- * Badge Component Styles
- * Small, contextual information display with variants and sizes
- */
-
+/* src/style/components/badge/badge.css */
 .badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: var(--font-weight-semibold);
-  border-radius: 999px;
+  font-family: var(--font-family-action);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-full);
   white-space: nowrap;
   transition: all var(--transition-base, 0.2s ease);
 }
-
-/* Size variants */
 .badge--sm {
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: .01rem .5rem;
   font-size: var(--font-size-xs);
-  min-height: 20px;
+  min-height: 16px;
 }
-
 .badge--md {
-  padding: var(--spacing-1) var(--spacing-3);
+  padding: .14rem .5rem 0 .5rem;
   font-size: var(--font-size-sm);
   min-height: 24px;
 }
-
 .badge--lg {
-  padding: var(--spacing-2) var(--spacing-4);
-  font-size: var(--font-size-base);
+  padding: 0 .6rem;
+  font-size: var(--font-size-md);
   min-height: 32px;
 }
-
-/* Color variants */
 .badge--primary {
   background-color: var(--color-primary);
   color: var(--color-on-primary);
 }
-
 .badge--secondary {
   background-color: var(--color-secondary);
   color: var(--color-on-secondary);
 }
-
 .badge--tertiary {
   background-color: var(--color-tertiary);
   color: var(--color-on-tertiary);
 }
-
 .badge--accent {
   background-color: var(--color-accent);
   color: var(--color-on-accent);
 }
-
 .badge--success {
   background-color: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
   color: hsla(var(--success-hue), 0%, 100%, 1);
 }
-
 .badge--warning {
   background-color: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
   color: hsla(var(--warning-hue), 0%, 100%, 1);
 }
-
 .badge--error {
   background-color: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
   color: hsla(var(--error-hue), 0%, 100%, 1);
 }
-
 .badge--info {
   background-color: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
   color: hsla(var(--info-hue), 0%, 100%, 1);

package/dist/components/badge.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    children: React.ReactNode;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant };

package/dist/components/badge.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    children: React.ReactNode;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant };

package/dist/components/badge.js

@@ -0,0 +1,42 @@
+"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/badge/index.ts
+var badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge
+});
+module.exports = __toCommonJS(badge_exports);
+
+// src/components/badge/Badge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Badge = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["badge", `badge--${variant}`, `badge--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, ...props, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge
+});

package/dist/components/badge.mjs

@@ -0,0 +1,15 @@
+// src/components/badge/Badge.tsx
+import { jsx } from "react/jsx-runtime";
+var Badge = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["badge", `badge--${variant}`, `badge--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, ...props, children });
+};
+export {
+  Badge
+};

package/dist/components/banner.css

@@ -0,0 +1,280 @@
+/* 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;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  white-space: nowrap;
+  text-decoration: none;
+  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);
+}
+.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;
+}
+.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;
+}
+.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);
+  box-shadow: 0 0 0 0 var(--color-action-primary);
+  color: var(--color-on-action-primary);
+}
+.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);
+}
+.btn--primary:active:not(:disabled) {
+  background-color: var(--color-action-primary-active);
+  transform: scale(0.98);
+}
+.btn--primary:focus-visible:not(:disabled) {
+  outline: 2px solid var(--color-action-primary);
+  outline-offset: 2px;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.btn:disabled {
+  background-color: var(--color-primary-disabled);
+  color: var(--color-foreground-2);
+  cursor: not-allowed;
+  border-color: var(--color-primary-disabled);
+}
+.btn--full-width {
+  width: 100%;
+}
+@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;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  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);
+  }
+}
+
+/* src/components/banner/banner.css */
+.banner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--spacing-4);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-4);
+  font-weight: 500;
+  gap: var(--spacing-3);
+}
+.banner__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  flex: 1;
+}
+.banner__message {
+  flex: 1;
+  line-height: 1.5;
+  margin: var(--spacing-1) var(--spacing-1) var(--spacing-1) 0;
+}
+.banner--info {
+  background-color: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
+  color: hsla(var(--info-hue), 0%, 100%, 1);
+}
+.banner--warning {
+  background-color: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
+  color: hsla(var(--warning-hue), 0%, 100%, 1);
+}
+.banner--error {
+  background-color: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
+  color: hsla(var(--error-hue), 0%, 100%, 1);
+}
+.banner--success {
+  background-color: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
+  color: hsla(var(--success-hue), 0%, 100%, 1);
+}

package/dist/components/banner.d.mts

@@ -0,0 +1,12 @@
+import React__default, { ReactNode } from 'react';
+
+type BannerType = 'info' | 'warning' | 'error' | 'success';
+interface BannerProps {
+    type?: BannerType;
+    children: ReactNode;
+    icon?: string;
+    onDismiss?: () => void;
+}
+declare const Banner: React__default.FC<BannerProps>;
+
+export { Banner, type BannerProps, type BannerType };

package/dist/components/banner.d.ts

@@ -0,0 +1,12 @@
+import React__default, { ReactNode } from 'react';
+
+type BannerType = 'info' | 'warning' | 'error' | 'success';
+interface BannerProps {
+    type?: BannerType;
+    children: ReactNode;
+    icon?: string;
+    onDismiss?: () => void;
+}
+declare const Banner: React__default.FC<BannerProps>;
+
+export { Banner, type BannerProps, type BannerType };

package/dist/components/banner.js

@@ -0,0 +1,184 @@
+"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/banner/index.ts
+var banner_exports = {};
+__export(banner_exports, {
+  Banner: () => Banner
+});
+module.exports = __toCommonJS(banner_exports);
+
+// 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/icons/iconConstants.ts
+var BANNER_TYPE_ICONS = {
+  info: "information-circle-16-solid",
+  warning: "exclamation-triangle-16-solid",
+  error: "x-circle-16-solid",
+  success: "check-circle-16-solid"
+};
+var ACTION_ICONS = {
+  close: "x-mark-solid",
+  back: "arrow-left-solid",
+  forward: "arrow-right-solid",
+  up: "arrow-up-solid",
+  down: "arrow-down-solid",
+  expand: "chevron-down-solid",
+  collapse: "chevron-up-solid",
+  menu: "bars-3-solid",
+  more: "ellipsis-horizontal-solid",
+  check: "check-solid",
+  cross: "x-mark-solid",
+  plus: "plus-solid",
+  minus: "minus-solid",
+  search: "magnifying-glass-solid",
+  clear: "x-mark-solid",
+  loading: "arrow-path-solid",
+  error: "exclamation-triangle-solid",
+  warning: "exclamation-triangle-solid",
+  info: "information-circle-solid",
+  success: "check-circle-solid"
+};
+
+// src/components/button/button.tsx
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("@ariakit/react");
+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";
+
+// src/components/banner/Banner.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Banner = ({
+  type = "info",
+  children,
+  icon,
+  onDismiss
+}) => {
+  const displayIcon = icon || BANNER_TYPE_ICONS[type];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `banner banner--${type}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "banner__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: displayIcon, size: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "banner__message", children })
+    ] }),
+    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        size: "xs",
+        onClick: onDismiss,
+        "aria-label": "Dismiss banner",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: ACTION_ICONS.close, size: 20 })
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Banner
+});