@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/checkbox.d.mts

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { CheckboxProps as CheckboxProps$1 } from '@ariakit/react';
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface CheckboxProps extends Omit<CheckboxProps$1, 'children' | 'size'> {
+    /**
+     * Size of the checkbox
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /**
+     * Label text for the checkbox
+     */
+    label?: React__default.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;
+}
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps, type CheckboxSize };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { CheckboxProps as CheckboxProps$1 } from '@ariakit/react';
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface CheckboxProps extends Omit<CheckboxProps$1, 'children' | 'size'> {
+    /**
+     * Size of the checkbox
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /**
+     * Label text for the checkbox
+     */
+    label?: React__default.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;
+}
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps, type CheckboxSize };

package/dist/components/checkbox.js

@@ -0,0 +1,130 @@
+"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/checkbox/index.ts
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  Checkbox: () => Checkbox
+});
+module.exports = __toCommonJS(checkbox_exports);
+
+// src/components/checkbox/Checkbox.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/icons/iconConstants.ts
+var CHECKBOX_ICONS = {
+  checked: "check-solid",
+  indeterminate: "minus-solid"
+};
+
+// src/components/checkbox/Checkbox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Checkbox = import_react2.default.forwardRef(
+  ({
+    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;
+    const isChecked = checked === true;
+    const isIndeterminate = indeterminate && !isChecked;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: checkboxClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "checkbox__container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react3.Checkbox,
+          {
+            ref,
+            checked,
+            disabled,
+            className: "checkbox__input",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "checkbox__box", children: [
+          isChecked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: CHECKBOX_ICONS.checked, size: iconSize, className: "checkbox__icon" }),
+          isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: CHECKBOX_ICONS.indeterminate, size: iconSize, className: "checkbox__icon" })
+        ] }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "checkbox__label", children: label })
+      ] }),
+      (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "checkbox__feedback", children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "checkbox__error-text", children: error }),
+        !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "checkbox__helper-text", children: helperText })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox
+});

package/dist/components/checkbox.mjs

@@ -0,0 +1,93 @@
+// src/components/checkbox/Checkbox.tsx
+import React from "react";
+import { Checkbox as AriakitCheckbox } 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/icons/iconConstants.ts
+var CHECKBOX_ICONS = {
+  checked: "check-solid",
+  indeterminate: "minus-solid"
+};
+
+// src/components/checkbox/Checkbox.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Checkbox = React.forwardRef(
+  ({
+    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;
+    const isChecked = checked === true;
+    const isIndeterminate = indeterminate && !isChecked;
+    return /* @__PURE__ */ jsxs("div", { className: checkboxClasses, children: [
+      /* @__PURE__ */ jsxs("label", { className: "checkbox__container", children: [
+        /* @__PURE__ */ jsx2(
+          AriakitCheckbox,
+          {
+            ref,
+            checked,
+            disabled,
+            className: "checkbox__input",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "checkbox__box", children: [
+          isChecked && /* @__PURE__ */ jsx2(Icon, { name: CHECKBOX_ICONS.checked, size: iconSize, className: "checkbox__icon" }),
+          isIndeterminate && /* @__PURE__ */ jsx2(Icon, { name: CHECKBOX_ICONS.indeterminate, size: iconSize, className: "checkbox__icon" })
+        ] }),
+        label && /* @__PURE__ */ jsx2("span", { className: "checkbox__label", children: label })
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxs("div", { className: "checkbox__feedback", children: [
+        error && /* @__PURE__ */ jsx2("span", { className: "checkbox__error-text", children: error }),
+        !error && helperText && /* @__PURE__ */ jsx2("span", { className: "checkbox__helper-text", children: helperText })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};

package/{src/style/components/code-block → dist/components}/code-block.css

@@ -1,26 +1,22 @@
-/* CodeBlock Component Styles */
-
+/* src/style/components/code-block/code-block.css */
 .code-block {
   background-color: var(--color-bg-2);
   border: 1px solid var(--color-foreground-2);
   border-color: rgba(0, 0, 0, 0.1);
   border-radius: var(--radius-base);
-  padding: var(--spacing-4);
+  padding: var(--spacing-8);
   margin: var(--spacing-4) 0;
   font-family: var(--font-family-mono);
   font-size: var(--font-size-sm);
   overflow-x: auto;
   transition: background-color var(--transition-base, 0.2s ease);
 }
-
 .code-block code {
   background: none;
   padding: 0;
   border-radius: 0;
   color: var(--color-foreground-1);
 }
-
-/* Inline variant - just the code text without background or margins */
 .code-block--inline {
   background: none;
   border: none;
@@ -31,4 +27,4 @@
   font-size: inherit;
   color: var(--color-primary);
   display: inline;
-}
+}

package/dist/components/code-block.d.mts

@@ -0,0 +1,24 @@
+import React__default, { ReactNode } from 'react';
+
+type CodeBlockVariant = 'block' | 'inline';
+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
+ */
+declare const CodeBlock: React__default.FC<CodeBlockProps>;
+
+export { CodeBlock, type CodeBlockProps, type CodeBlockVariant };

package/dist/components/code-block.d.ts

@@ -0,0 +1,24 @@
+import React__default, { ReactNode } from 'react';
+
+type CodeBlockVariant = 'block' | 'inline';
+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
+ */
+declare const CodeBlock: React__default.FC<CodeBlockProps>;
+
+export { CodeBlock, type CodeBlockProps, type CodeBlockVariant };

package/dist/components/code-block.js

@@ -0,0 +1,43 @@
+"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/code-block/index.ts
+var code_block_exports = {};
+__export(code_block_exports, {
+  CodeBlock: () => CodeBlock
+});
+module.exports = __toCommonJS(code_block_exports);
+
+// src/components/code-block/code-block.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CodeBlock = ({ children, variant = "block", className }) => {
+  const classes = [
+    "code-block",
+    variant === "inline" && "code-block--inline",
+    className
+  ].filter(Boolean).join(" ");
+  if (variant === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: classes, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: `${classes} scrollable`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeBlock
+});

package/dist/components/code-block.mjs

@@ -0,0 +1,16 @@
+// src/components/code-block/code-block.tsx
+import { jsx } from "react/jsx-runtime";
+var CodeBlock = ({ children, variant = "block", className }) => {
+  const classes = [
+    "code-block",
+    variant === "inline" && "code-block--inline",
+    className
+  ].filter(Boolean).join(" ");
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsx("code", { className: classes, children });
+  }
+  return /* @__PURE__ */ jsx("pre", { className: `${classes} scrollable`, children: /* @__PURE__ */ jsx("code", { children }) });
+};
+export {
+  CodeBlock
+};