@hellboy/ds 0.1.3 → 0.2.7

package/dist/components/slider.d.ts

@@ -0,0 +1,69 @@
+import React__default from 'react';
+
+interface SliderProps {
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Current value
+     */
+    value: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: number) => void;
+    /**
+     * Callback when drag starts
+     */
+    onDragStart?: () => void;
+    /**
+     * Callback when drag ends (value committed)
+     */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * Label for the slider
+     */
+    label?: string;
+    /**
+     * Show value display
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Slider type for different backgrounds
+     * @default 'default'
+     */
+    type?: 'default' | 'hue' | 'saturation' | 'lightness';
+    /**
+     * Base color for saturation/lightness gradients (hsl values)
+     */
+    baseHue?: number;
+    /**
+     * Base saturation for lightness gradient (0-100)
+     */
+    baseSaturation?: number;
+}
+declare const Slider: React__default.FC<SliderProps>;
+
+export { Slider, type SliderProps };

package/dist/components/slider.js

@@ -0,0 +1,254 @@
+"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/slider/index.ts
+var slider_exports = {};
+__export(slider_exports, {
+  Slider: () => Slider
+});
+module.exports = __toCommonJS(slider_exports);
+
+// src/components/slider/Slider.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/icons/iconConstants.ts
+var NAVIGATION_ICONS = {
+  home: "home-solid",
+  dashboard: "squares-2x2-solid",
+  profile: "user-solid",
+  settings: "cog-solid",
+  logout: "arrow-right-on-rectangle-solid",
+  login: "arrow-left-on-rectangle-solid",
+  notifications: "bell-solid",
+  messages: "chat-bubble-left-solid",
+  help: "question-mark-circle-solid",
+  support: "lifebuoy-solid",
+  chevronDown: "chevron-down-solid",
+  chevronUp: "chevron-up-solid",
+  chevronLeft: "chevron-left-solid",
+  chevronRight: "chevron-right-solid"
+};
+
+// src/components/slider/Slider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Slider = ({
+  min = 0,
+  max = 100,
+  value,
+  step = 1,
+  onChange,
+  onDragStart,
+  onChangeEnd,
+  label,
+  showValue = true,
+  className = "",
+  disabled = false,
+  type = "default",
+  baseHue = 0,
+  baseSaturation = 70
+}) => {
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const inputRef = (0, import_react2.useRef)(null);
+  const containerRef = (0, import_react2.useRef)(null);
+  const valueRef = (0, import_react2.useRef)(value);
+  import_react2.default.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  const handleChange = (0, import_react2.useCallback)((event) => {
+    const newValue = parseFloat(event.target.value);
+    onChange(newValue);
+  }, [onChange]);
+  const getValueFromPosition = (0, import_react2.useCallback)((clientX) => {
+    if (!containerRef.current) return value;
+    const rect = containerRef.current.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const rawValue = min + percentage * (max - min);
+    const steppedValue = Math.round(rawValue / step) * step;
+    return Math.max(min, Math.min(max, steppedValue));
+  }, [min, max, step, value]);
+  const handleMouseDown = (0, import_react2.useCallback)((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleMouseMove = (0, import_react2.useCallback)((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleMouseUp = (0, import_react2.useCallback)(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  import_react2.default.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleTouchStart = (0, import_react2.useCallback)((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleTouchMove = (0, import_react2.useCallback)((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleTouchEnd = (0, import_react2.useCallback)(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  import_react2.default.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("touchmove", handleTouchMove);
+    document.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isDragging, handleTouchMove, handleTouchEnd]);
+  const sliderClasses = [
+    "slider",
+    `slider--${type}`,
+    isDragging && "slider--dragging",
+    disabled && "slider--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const getBackground = () => {
+    switch (type) {
+      case "hue":
+        return "linear-gradient(to right, hsl(0, 70%, 50%), hsl(60, 70%, 50%), hsl(120, 70%, 50%), hsl(180, 70%, 50%), hsl(240, 70%, 50%), hsl(300, 70%, 50%), hsl(360, 70%, 50%))";
+      case "saturation":
+        return `linear-gradient(to right, hsl(${baseHue}, 0%, 50%), hsl(${baseHue}, 100%, 50%))`;
+      case "lightness":
+        return `linear-gradient(to right, hsl(${baseHue}, ${baseSaturation}%, 0%), hsl(${baseHue}, ${baseSaturation}%, 50%), hsl(${baseHue}, ${baseSaturation}%, 100%))`;
+      default:
+        return "var(--color-action-primary)";
+    }
+  };
+  const inputStyle = { background: getBackground() };
+  const stepMarks = step > 1 ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => min + i * step) : [];
+  const thumbPosition = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: sliderClasses, children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "slider__header", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "slider__label", children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "slider__value", children: value })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "slider__container", ref: containerRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          className: "slider__input",
+          style: inputStyle,
+          disabled,
+          readOnly: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "slider__thumb",
+          style: {
+            left: `${thumbPosition}%`,
+            transform: "translateX(-50%)"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "slider__thumb-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: NAVIGATION_ICONS.chevronDown, size: 16 }) })
+        }
+      ),
+      stepMarks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "slider__marks", children: stepMarks.map((mark) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "slider__mark",
+          style: {
+            left: `${(mark - min) / (max - min) * 100}%`
+          }
+        },
+        mark
+      )) })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slider
+});

package/dist/components/slider.mjs

@@ -0,0 +1,217 @@
+// src/components/slider/Slider.tsx
+import React, { useState, useCallback, useRef } 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/icons/iconConstants.ts
+var NAVIGATION_ICONS = {
+  home: "home-solid",
+  dashboard: "squares-2x2-solid",
+  profile: "user-solid",
+  settings: "cog-solid",
+  logout: "arrow-right-on-rectangle-solid",
+  login: "arrow-left-on-rectangle-solid",
+  notifications: "bell-solid",
+  messages: "chat-bubble-left-solid",
+  help: "question-mark-circle-solid",
+  support: "lifebuoy-solid",
+  chevronDown: "chevron-down-solid",
+  chevronUp: "chevron-up-solid",
+  chevronLeft: "chevron-left-solid",
+  chevronRight: "chevron-right-solid"
+};
+
+// src/components/slider/Slider.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Slider = ({
+  min = 0,
+  max = 100,
+  value,
+  step = 1,
+  onChange,
+  onDragStart,
+  onChangeEnd,
+  label,
+  showValue = true,
+  className = "",
+  disabled = false,
+  type = "default",
+  baseHue = 0,
+  baseSaturation = 70
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const valueRef = useRef(value);
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  const handleChange = useCallback((event) => {
+    const newValue = parseFloat(event.target.value);
+    onChange(newValue);
+  }, [onChange]);
+  const getValueFromPosition = useCallback((clientX) => {
+    if (!containerRef.current) return value;
+    const rect = containerRef.current.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const rawValue = min + percentage * (max - min);
+    const steppedValue = Math.round(rawValue / step) * step;
+    return Math.max(min, Math.min(max, steppedValue));
+  }, [min, max, step, value]);
+  const handleMouseDown = useCallback((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleMouseMove = useCallback((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  React.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleTouchStart = useCallback((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleTouchMove = useCallback((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleTouchEnd = useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  React.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("touchmove", handleTouchMove);
+    document.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isDragging, handleTouchMove, handleTouchEnd]);
+  const sliderClasses = [
+    "slider",
+    `slider--${type}`,
+    isDragging && "slider--dragging",
+    disabled && "slider--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const getBackground = () => {
+    switch (type) {
+      case "hue":
+        return "linear-gradient(to right, hsl(0, 70%, 50%), hsl(60, 70%, 50%), hsl(120, 70%, 50%), hsl(180, 70%, 50%), hsl(240, 70%, 50%), hsl(300, 70%, 50%), hsl(360, 70%, 50%))";
+      case "saturation":
+        return `linear-gradient(to right, hsl(${baseHue}, 0%, 50%), hsl(${baseHue}, 100%, 50%))`;
+      case "lightness":
+        return `linear-gradient(to right, hsl(${baseHue}, ${baseSaturation}%, 0%), hsl(${baseHue}, ${baseSaturation}%, 50%), hsl(${baseHue}, ${baseSaturation}%, 100%))`;
+      default:
+        return "var(--color-action-primary)";
+    }
+  };
+  const inputStyle = { background: getBackground() };
+  const stepMarks = step > 1 ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => min + i * step) : [];
+  const thumbPosition = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs("div", { className: sliderClasses, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "slider__header", children: [
+      label && /* @__PURE__ */ jsx2("label", { className: "slider__label", children: label }),
+      showValue && /* @__PURE__ */ jsx2("span", { className: "slider__value", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "slider__container", ref: containerRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: inputRef,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          className: "slider__input",
+          style: inputStyle,
+          disabled,
+          readOnly: true
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "slider__thumb",
+          style: {
+            left: `${thumbPosition}%`,
+            transform: "translateX(-50%)"
+          },
+          children: /* @__PURE__ */ jsx2("div", { className: "slider__thumb-icon", children: /* @__PURE__ */ jsx2(Icon, { name: NAVIGATION_ICONS.chevronDown, size: 16 }) })
+        }
+      ),
+      stepMarks.length > 0 && /* @__PURE__ */ jsx2("div", { className: "slider__marks", children: stepMarks.map((mark) => /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "slider__mark",
+          style: {
+            left: `${(mark - min) / (max - min) * 100}%`
+          }
+        },
+        mark
+      )) })
+    ] })
+  ] });
+};
+export {
+  Slider
+};