@hellboy/ds 0.1.2 → 0.2.7

package/src/components/badge/Badge.tsx

@@ -1,29 +0,0 @@
-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

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

package/src/components/banner/Banner.tsx

@@ -1,48 +0,0 @@
-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

@@ -1,44 +0,0 @@
-.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

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

package/src/components/button/button.tsx

@@ -1,127 +0,0 @@
-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

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

package/src/components/card/card.tsx

@@ -1,57 +0,0 @@
-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

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

package/src/components/checkbox/Checkbox.tsx

@@ -1,98 +0,0 @@
-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

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

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

@@ -1,44 +0,0 @@
-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

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