@hellboy/ds 0.1.2 → 0.2.7

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

@@ -1,108 +1,83 @@
-/* table.css */
-
+/* src/style/components/table/table.css */
 .table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
+  margin: var(--spacing-6) 0;
 }
-
-/* Size variants */
 .table--sm {
   font-size: var(--font-size-xs);
 }
-
 .table--sm .table__cell,
 .table--sm .table__cell--header {
   padding: var(--spacing-2) var(--spacing-3);
 }
-
 .table--md .table__cell,
 .table--md .table__cell--header {
   padding: var(--spacing-3) var(--spacing-4);
 }
-
 .table--lg .table__cell,
 .table--lg .table__cell--header {
   padding: var(--spacing-4) var(--spacing-6);
 }
-
-/* Default padding for md size */
 .table__cell,
 .table__cell--header {
   padding: var(--spacing-3) var(--spacing-4);
   text-align: left;
   vertical-align: top;
 }
-
 .table__cell--header {
   font-weight: var(--font-weight-semibold);
   background-color: var(--color-bg-2);
   border-bottom: 1px solid var(--color-foreground-2);
   color: var(--color-foreground-1);
 }
-
 .table__cell {
   color: var(--color-foreground-1);
   border-bottom: 1px solid var(--color-foreground-2);
   border-bottom-color: rgba(0, 0, 0, 0.1);
   transition: background-color var(--transition-base, 0.2s ease);
 }
-
 .table__row:hover .table__cell:not(.table__cell--header) {
   background-color: transparent;
 }
-
-/* Bordered variant */
 .table--bordered {
   border: 1px solid var(--color-foreground-2);
   border-color: rgba(0, 0, 0, 0.1);
 }
-
 .table--bordered .table__cell,
 .table--bordered .table__cell--header {
   border-right: 1px solid var(--color-foreground-2);
   border-right-color: rgba(0, 0, 0, 0.1);
 }
-
 .table--bordered .table__cell:last-child,
 .table--bordered .table__cell--header:last-child {
   border-right: none;
 }
-
 .table--bordered .table__row:last-child .table__cell {
   border-bottom: none;
 }
-
-/* Striped variant - zebra pattern using background color variations */
 .table--striped tbody .table__row:nth-child(odd) {
   background-color: var(--color-bg-3);
 }
-
 .table--striped tbody .table__row:nth-child(even) {
   background-color: var(--color-bg-2);
 }
-
 .table--striped tbody .table__row:nth-child(even) .table__cell {
   background-color: transparent;
 }
-
 .table--striped tbody .table__row:nth-child(odd) .table__cell {
   background-color: transparent;
 }
-
-/* Hover variant */
 .table--hover tbody .table__row:hover {
   background-color: var(--color-bg-2);
   transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
 }
-
 .table--hover tbody .table__row:hover .table__cell {
   background-color: transparent;
 }
-
-/* Responsive wrapper */
 .table-container {
   overflow-x: auto;
   margin: var(--spacing-4) 0;
-}
+}

package/dist/components/table.d.mts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Whether the table should have a border
+     */
+    bordered?: boolean;
+    /**
+     * Whether the table should have striped rows
+     */
+    striped?: boolean;
+    /**
+     * Whether the table should have hover effects
+     */
+    hover?: boolean;
+    /**
+     * Size variant for the table
+     */
+    size?: "sm" | "md" | "lg";
+}
+interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Whether this is a header cell
+     */
+    header?: boolean;
+}
+interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const Table: React.FC<TableProps>;
+declare const TableHead: React.FC<TableHeadProps>;
+declare const TableBody: React.FC<TableBodyProps>;
+declare const TableRow: React.FC<TableRowProps>;
+declare const TableCell: React.FC<TableCellProps>;
+declare const TableContainer: React.FC<TableContainerProps>;
+
+export { Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps };

package/dist/components/table.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Whether the table should have a border
+     */
+    bordered?: boolean;
+    /**
+     * Whether the table should have striped rows
+     */
+    striped?: boolean;
+    /**
+     * Whether the table should have hover effects
+     */
+    hover?: boolean;
+    /**
+     * Size variant for the table
+     */
+    size?: "sm" | "md" | "lg";
+}
+interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Whether this is a header cell
+     */
+    header?: boolean;
+}
+interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const Table: React.FC<TableProps>;
+declare const TableHead: React.FC<TableHeadProps>;
+declare const TableBody: React.FC<TableBodyProps>;
+declare const TableRow: React.FC<TableRowProps>;
+declare const TableCell: React.FC<TableCellProps>;
+declare const TableContainer: React.FC<TableContainerProps>;
+
+export { Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps };

package/dist/components/table.js

@@ -0,0 +1,108 @@
+"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/table/index.ts
+var table_exports = {};
+__export(table_exports, {
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCell: () => TableCell,
+  TableContainer: () => TableContainer,
+  TableHead: () => TableHead,
+  TableRow: () => TableRow
+});
+module.exports = __toCommonJS(table_exports);
+
+// src/components/table/Table.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Table = ({
+  bordered = false,
+  striped = true,
+  hover = true,
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    "table",
+    bordered && "table--bordered",
+    striped && "table--striped",
+    hover && "table--hover",
+    size && `table--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: classes, ...props, children });
+};
+var TableHead = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__head", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: classes, ...props, children });
+};
+var TableBody = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__body", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: classes, ...props, children });
+};
+var TableRow = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__row", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: classes, ...props, children });
+};
+var TableCell = ({
+  header = false,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    header ? "table__cell--header" : "table__cell",
+    className
+  ].filter(Boolean).join(" ");
+  if (header) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: classes, ...props, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: classes, ...props, children });
+};
+var TableContainer = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table-container scrollable", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classes, ...props, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow
+});

package/dist/components/table.mjs

@@ -0,0 +1,76 @@
+// src/components/table/Table.tsx
+import { jsx } from "react/jsx-runtime";
+var Table = ({
+  bordered = false,
+  striped = true,
+  hover = true,
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    "table",
+    bordered && "table--bordered",
+    striped && "table--striped",
+    hover && "table--hover",
+    size && `table--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("table", { className: classes, ...props, children });
+};
+var TableHead = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__head", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("thead", { className: classes, ...props, children });
+};
+var TableBody = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__body", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("tbody", { className: classes, ...props, children });
+};
+var TableRow = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__row", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("tr", { className: classes, ...props, children });
+};
+var TableCell = ({
+  header = false,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    header ? "table__cell--header" : "table__cell",
+    className
+  ].filter(Boolean).join(" ");
+  if (header) {
+    return /* @__PURE__ */ jsx("th", { className: classes, ...props, children });
+  }
+  return /* @__PURE__ */ jsx("td", { className: classes, ...props, children });
+};
+var TableContainer = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table-container scrollable", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
+};
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow
+};

package/dist/components/tag.css

@@ -0,0 +1,97 @@
+/* src/style/components/tag/tag.css */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--color-foreground-1);
+  color: var(--color-bg-1);
+  cursor: default;
+  justify-content: center;
+  font-family: var(--font-family-action);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  transition: all var(--transition-base, 0.2s ease);
+  text-transform: uppercase;
+}
+.tag.clickable:hover {
+  cursor: pointer;
+}
+.tag--sm {
+  padding: 0.08rem 0.4rem;
+  font-size: var(--font-size-xs, 0.75rem);
+  min-height: 16px;
+}
+.tag--md {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem) 0.1rem var(--spacing-2, 0.5rem);
+  font-size: var(--font-size-sm, 0.875rem);
+  min-height: 24px;
+}
+.tag--lg {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
+  font-size: var(--font-size-base, 1rem);
+  min-height: 32px;
+}
+.tag--primary {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  outline-width: 0;
+}
+.tag--primary.clickable:hover {
+  outline: 2px solid var(--color-primary-hover);
+}
+.tag--secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-on-secondary);
+  outline-width: 0;
+}
+.tag--secondary.clickable:hover {
+  outline: 2px solid var(--color-secondary-hover);
+}
+.tag--tertiary {
+  background-color: var(--color-tertiary);
+  color: var(--color-on-tertiary);
+  outline-width: 0;
+}
+.tag--tertiary.clickable:hover {
+  outline: 2px solid var(--color-tertiary-hover);
+}
+.tag--accent {
+  background-color: var(--color-accent);
+  color: var(--color-on-accent);
+  outline-width: 0;
+}
+.tag--accent.clickable:hover {
+  outline: 2px solid var(--color-accent-hover);
+}
+.tag--success {
+  background-color: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
+  color: hsla(var(--success-hue), var(--success-saturation), 96%, 1);
+  border-color: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
+}
+.tag--success.clickable:hover {
+  outline: 2px solid hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
+}
+.tag--warning {
+  background-color: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
+  color: hsla(var(--warning-hue), var(--warning-saturation), 96%, 1);
+  border-color: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
+}
+.tag--warning.clickable:hover {
+  outline: 2px solid hsla(var(--warning-hue), var(--warning-saturation), var(--warming-lightness), 1);
+}
+.tag--error {
+  background-color: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
+  color: hsla(var(--error-hue), var(--error-saturation), 96%, 1);
+  border-color: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
+}
+.tag--error.clickable:hover {
+  outline: 2px solid hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
+}
+.tag--info {
+  background-color: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
+  color: hsla(var(--info-hue), var(--info-saturation), 96%, 1);
+  border-color: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
+}
+.tag--info.clickable:hover {
+  outline: 2px solid hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
+}

package/dist/components/tag.d.mts

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

package/dist/components/tag.d.ts

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

package/dist/components/tag.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/tag/index.ts
+var tag_exports = {};
+__export(tag_exports, {
+  Tag: () => Tag
+});
+module.exports = __toCommonJS(tag_exports);
+
+// src/components/tag/Tag.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tag = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["tag", `tag--${variant}`, `tag--${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 = {
+  Tag
+});

package/dist/components/tag.mjs

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