@hellboy/ds 0.1.2

package/dist/theme.css

@@ -0,0 +1,55 @@
+/**
+ * Theme Configuration (generated from theme.json)
+ * Generated during build from src/style/themes/theme.json
+ */
+
+:root {
+  /* Primary Color */
+  --primary-hue: 0;
+  --primary-saturation: 69%;
+  --primary-lightness: 31%;
+  --primary-lightness-hover: undefined%;
+  --primary-lightness-active: undefined%;
+  --primary-lightness-disabled: undefined%;
+
+  /* Secondary Color */
+  --secondary-hue: 16;
+  --secondary-saturation: 63%;
+  --secondary-lightness: 23%;
+  --secondary-lightness-hover: undefined%;
+  --secondary-lightness-active: undefined%;
+  --secondary-lightness-disabled: undefined%;
+
+  /* Accent Color */
+  --accent-hue: 0;
+  --accent-saturation: 89%;
+  --accent-lightness: 41%;
+  --accent-lightness-hover: undefined%;
+  --accent-lightness-active: undefined%;
+  --accent-lightness-disabled: undefined%;
+
+  /* Status Colors */
+  --success-hue: 140;
+  --success-saturation: 100%;
+  --success-lightness: 19%;
+  --success-lightness-hover: undefined%;
+  --success-lightness-active: undefined%;
+
+  --warning-hue: 34;
+  --warning-saturation: 100%;
+  --warning-lightness: 31%;
+  --warning-lightness-hover: undefined%;
+  --warning-lightness-active: undefined%;
+
+  --error-hue: 264;
+  --error-saturation: 0%;
+  --error-lightness: 14%;
+  --error-lightness-hover: undefined%;
+  --error-lightness-active: undefined%;
+
+  --info-hue: 261;
+  --info-saturation: 69%;
+  --info-lightness: 31%;
+  --info-lightness-hover: undefined%;
+  --info-lightness-active: undefined%;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@hellboy/ds",
+  "version": "0.1.2",
+  "description": "Hellboy Design System - Core components",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./dist/theme.css": "./dist/theme.css"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --dts",
+    "dev": "tsup src/index.ts --dts --watch"
+  },
+  "keywords": [
+    "design-system",
+    "components",
+    "ui"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ariakit/react": "^0.4.0",
+    "@iconify/react": "^6.0.2",
+    "famicons": "^7.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

package/src/components/badge/Badge.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import '../../style/components/badge/badge.css';
+
+export type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  children: React.ReactNode;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  variant = 'primary',
+  size = 'md',
+  className = '',
+  children,
+  ...props
+}) => {
+  const classes = ['badge', `badge--${variant}`, `badge--${size}`, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <span className={classes} {...props}>
+      {children}
+    </span>
+  );
+};

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/src/components/banner/Banner.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import { Icon } from '../icons';
+import { Button } from '../button';
+import './banner.css';
+
+export type BannerType = 'info' | 'warning' | 'error' | 'success';
+
+export interface BannerProps {
+  type?: BannerType;
+  children: ReactNode;
+  icon?: string;
+  onDismiss?: () => void;
+}
+
+export const Banner: React.FC<BannerProps> = ({
+  type = 'info',
+  children,
+  icon,
+  onDismiss
+}) => {
+  const defaultIcons: Record<BannerType, string> = {
+    info: 'information-circle',
+    warning: 'warning',
+    error: 'close-circle',
+    success: 'checkmark-circle'
+  };
+
+  const displayIcon = icon || defaultIcons[type];
+
+  return (
+    <div className={`banner banner--${type}`}>
+      <div className="banner__content">
+        <Icon name={displayIcon as any} size={32} />
+        <div className="banner__message">{children}</div>
+      </div>
+      {onDismiss && (
+        <Button
+          variant="ghost"
+          size="xs"
+          onClick={onDismiss}
+          aria-label="Dismiss banner"
+        >
+          <Icon name="close" size={20} />
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/components/banner/banner.css

@@ -0,0 +1,44 @@
+.banner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--spacing-4);
+  border-radius: var(--border-radius-md, 8px);
+  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;
+}
+
+/* Type variants */
+.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/src/components/banner/index.ts

@@ -0,0 +1 @@
+export * from "./Banner";

package/src/components/button/button.tsx

@@ -0,0 +1,127 @@
+import React, { ReactNode } from 'react';
+import { Button as AriakitButton, ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { Icon, IconName } from '../icons';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends Omit<AriakitButtonProps, '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;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      children,
+      isLoading = false,
+      disabled = false,
+      fullWidth = false,
+      startIcon,
+      endIcon,
+      iconOnly = false,
+      href,
+      className,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+  const buttonClasses = [
+    'btn',
+    `btn--${variant}`,
+    `btn--${size}`,
+    fullWidth && 'btn--full-width',
+    iconOnly && 'btn--icon-only',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const iconSize = size === 'xs' ? 14 : size === 'sm' ? 16 : size === 'lg' ? 24 : 20;
+
+  const buttonContent = (
+    <>
+      {isLoading && <span className="btn__spinner" />}
+      {startIcon && (
+        isLoading ? (
+          <span className="btn__icon-placeholder" style={{ width: iconSize, height: iconSize }} />
+        ) : (
+          <Icon name={startIcon} size={iconSize} className="btn__icon" />
+        )
+      )}
+      {!iconOnly && children}
+      {endIcon && <Icon name={endIcon} size={iconSize} className="btn__icon" />}
+    </>
+  );
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (href && !isLoading && !disabled) {
+      window.location.href = href;
+    }
+    onClick?.(e);
+  };
+
+  return (
+    <AriakitButton
+      ref={ref}
+      disabled={disabled || isLoading}
+      className={buttonClasses}
+      onClick={handleClick}
+      {...props}
+    >
+      {buttonContent}
+    </AriakitButton>
+  );
+});
+
+Button.displayName = 'Button';

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './button';

package/src/components/card/card.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from 'react';
+import '../../style/components/card/card.css';
+
+export type CardVariant = 'default' | 'elevated' | 'outlined';
+
+export interface CardProps {
+  /**
+   * Visual variant of the card
+   * @default 'default'
+   */
+  variant?: CardVariant;
+
+  /**
+   * Card content
+   */
+  children: ReactNode;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * Click handler for interactive cards
+   */
+  onClick?: () => void;
+}
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'default',
+  children,
+  className = '',
+  onClick,
+  ...props
+}) => {
+  const cardClasses = [
+    'card',
+    `card--${variant}`,
+    onClick && 'card--interactive',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const Component = onClick ? 'button' : 'div';
+
+  return (
+    <Component
+      className={cardClasses}
+      onClick={onClick}
+      {...(onClick && { type: 'button' })}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export * from './card';

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Checkbox as AriakitCheckbox, CheckboxProps as AriakitCheckboxProps } from '@ariakit/react';
+import { Icon } from '../icons';
+
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+
+export interface CheckboxProps extends Omit<AriakitCheckboxProps, 'children' | 'size'> {
+  /**
+   * Size of the checkbox
+   * @default 'md'
+   */
+  size?: CheckboxSize;
+
+  /**
+   * Label text for the checkbox
+   */
+  label?: React.ReactNode;
+
+  /**
+   * Error message to display below the checkbox
+   */
+  error?: string;
+
+  /**
+   * Helper text to display below the checkbox
+   */
+  helperText?: string;
+
+  /**
+   * Whether the checkbox is in an indeterminate state
+   * @default false
+   */
+  indeterminate?: boolean;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      size = 'md',
+      label,
+      error,
+      helperText,
+      indeterminate = false,
+      disabled = false,
+      className,
+      checked,
+      ...props
+    },
+    ref
+  ) => {
+    const checkboxClasses = [
+      'checkbox',
+      `checkbox--${size}`,
+      error && 'checkbox--error',
+      disabled && 'checkbox--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const iconSize = size === 'sm' ? 14 : size === 'lg' ? 20 : 16;
+
+    // Determine checked state for icon display
+    const isChecked = checked === true;
+    const isIndeterminate = indeterminate && !isChecked;
+
+    return (
+      <div className={checkboxClasses}>
+        <label className="checkbox__container">
+          <AriakitCheckbox
+            ref={ref}
+            checked={checked}
+            disabled={disabled}
+            className="checkbox__input"
+            {...props}
+          />
+          <span className="checkbox__box">
+            {isChecked && (
+              <Icon name="checkmark-sharp" size={iconSize} className="checkbox__icon" />
+            )}
+            {isIndeterminate && (
+              <Icon name="minus" size={iconSize} className="checkbox__icon" />
+            )}
+          </span>
+          {label && <span className="checkbox__label">{label}</span>}
+        </label>
+        {(error || helperText) && (
+          <div className="checkbox__feedback">
+            {error && <span className="checkbox__error-text">{error}</span>}
+            {!error && helperText && <span className="checkbox__helper-text">{helperText}</span>}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/components/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/src/components/code-block/code-block.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+
+export type CodeBlockVariant = 'block' | 'inline';
+
+export interface CodeBlockProps {
+  /**
+   * Code content
+   */
+  children: ReactNode;
+
+  /**
+   * Variant of the code block
+   * @default 'block'
+   */
+  variant?: CodeBlockVariant;
+
+  /**
+   * Custom class name
+   */
+  className?: string;
+}
+
+/**
+ * CodeBlock component for displaying code snippets
+ */
+export const CodeBlock: React.FC<CodeBlockProps> = ({ children, variant = 'block', className }) => {
+  const classes = [
+    'code-block',
+    variant === 'inline' && 'code-block--inline',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (variant === 'inline') {
+    return <code className={classes}>{children}</code>;
+  }
+
+  return (
+    <pre className={classes}>
+      <code>{children}</code>
+    </pre>
+  );
+};

package/src/components/code-block/index.ts

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps, type CodeBlockVariant } from './code-block';