@helpdice/ui 1.0.1 → 1.0.2

package/esm/table/index.d.ts

@@ -0,0 +1,5 @@
+import Table from "./table";
+export type { TableProps } from "./table";
+export type { TableColumnProps } from "./table-column";
+export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender, } from "./table-types";
+export default Table;

package/esm/table/index.js

@@ -0,0 +1,2 @@
+import Table from './table';
+export default Table;

package/esm/table/table-body.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TableDataItemBase, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from "./table-types";
+interface Props<TableDataItem extends TableDataItemBase> {
+    hover: boolean;
+    emptyText: string;
+    onRow?: TableOnRowClick<TableDataItem>;
+    onCell?: TableOnCellClick<TableDataItem>;
+    data: Array<TableDataItem>;
+    className?: string;
+    rowClassName: TableRowClassNameHandler<TableDataItem>;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export type TableBodyProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
+declare const TableBody: {
+    <TableDataItem extends TableDataItemBase>({ data, hover, emptyText, onRow, onCell, rowClassName, }: TableBodyProps<TableDataItem>): JSX.Element;
+    displayName: string;
+};
+export default TableBody;

package/esm/table/table-body.js

@@ -0,0 +1,45 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import TableCell from './table-cell';
+import { useTableContext } from './table-context';
+import useClasses from '../use-classes';
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+    hover = _ref.hover,
+    emptyText = _ref.emptyText,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell,
+    rowClassName = _ref.rowClassName;
+  var theme = useTheme();
+  var _useTableContext = useTableContext(),
+    columns = _useTableContext.columns;
+  var rowClickHandler = function rowClickHandler(row, index) {
+    onRow && onRow(row, index);
+  };
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+  }, data.map(function (row, index) {
+    var className = rowClassName(row, index);
+    return /*#__PURE__*/React.createElement("tr", {
+      key: "tbody-row-".concat(index),
+      onClick: function onClick() {
+        return rowClickHandler(row, index);
+      },
+      className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses({
+        hover: hover
+      }, className) || "")
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      columns: columns,
+      row: row,
+      rowIndex: index,
+      emptyText: emptyText,
+      onCellClick: onCell
+    }));
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3433300570",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+};
+TableBody.displayName = 'TableBody';
+export default TableBody;

package/esm/table/table-cell.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TableDataItemBase, TableAbstractColumn, TableOnCellClick } from "./table-types";
+interface Props<TableDataItem extends TableDataItemBase> {
+    columns: Array<TableAbstractColumn<TableDataItem>>;
+    row: TableDataItem;
+    rowIndex: number;
+    emptyText: string;
+    onCellClick?: TableOnCellClick<TableDataItem>;
+}
+export type TableCellData<TableDataItem> = {
+    row: number;
+    column: number;
+    rowValue: TableDataItem;
+};
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export type TableCellProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
+declare const TableCell: <TableDataItem extends TableDataItemBase>({ columns, row, rowIndex, emptyText, onCellClick, }: TableCellProps<TableDataItem>) => JSX.Element;
+export default TableCell;

package/esm/table/table-cell.js

@@ -0,0 +1,25 @@
+import React from 'react';
+var TableCell = function TableCell(_ref) {
+  var columns = _ref.columns,
+    row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    emptyText = _ref.emptyText,
+    onCellClick = _ref.onCellClick;
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var currentRowValue = row[column.prop];
+    var cellValue = currentRowValue || emptyText;
+    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    return /*#__PURE__*/React.createElement("td", {
+      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
+};
+export default TableCell;

package/esm/table/table-column.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TableColumnRender, TableDataItemBase } from "./table-types";
+export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
+    prop: keyof TableDataItem;
+    label?: string;
+    width?: number;
+    className?: string;
+    render?: TableColumnRender<TableDataItem>;
+};
+declare const TableColumn: {
+    <TableDataItem extends TableDataItemBase>(columnProps: React.PropsWithChildren<TableColumnProps<TableDataItem>>): null;
+    displayName: string;
+};
+export default TableColumn;

package/esm/table/table-column.js

@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect } from 'react';
+import { useTableContext } from './table-context';
+import useWarning from '../utils/use-warning';
+var TableColumn = function TableColumn(columnProps) {
+  var _ref = columnProps,
+    children = _ref.children,
+    prop = _ref.prop,
+    label = _ref.label,
+    width = _ref.width,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    renderHandler = _ref.render;
+  var _useTableContext = useTableContext(),
+    updateColumn = _useTableContext.updateColumn;
+  var safeProp = "".concat(prop.toString()).trim();
+  if (!safeProp) {
+    useWarning('The props "prop" is required.', 'Table.Column');
+  }
+  useEffect(function () {
+    updateColumn({
+      label: children || label,
+      prop: safeProp,
+      width: width,
+      className: className,
+      renderHandler: function renderHandler() {}
+    });
+  }, [children, label, prop, width, className, renderHandler]);
+  return null;
+};
+TableColumn.displayName = 'TableColumn';
+export default TableColumn;

package/esm/table/table-context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TableAbstractColumn } from "./table-types";
+export interface TableConfig<T> {
+    columns: Array<TableAbstractColumn<T>>;
+    updateColumn: (column: TableAbstractColumn<T>) => void;
+}
+export declare const TableContext: React.Context<TableConfig<any>>;
+export declare const useTableContext: <T>() => TableConfig<T>;

package/esm/table/table-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+export var TableContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useTableContext = function useTableContext() {
+  return React.useContext(TableContext);
+};

package/esm/table/table-head.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TableAbstractColumn, TableDataItemBase } from "./table-types";
+interface Props<TableDataItem extends TableDataItemBase> {
+    width: number;
+    columns: Array<TableAbstractColumn<TableDataItem>>;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export type TableHeadProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
+declare const TableHead: {
+    <TableDataItem extends TableDataItemBase>(props: TableHeadProps<TableDataItem>): JSX.Element;
+    displayName: string;
+};
+export default TableHead;

package/esm/table/table-head.js

@@ -0,0 +1,51 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+var makeColgroup = function makeColgroup(width, columns) {
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _ref = props,
+    columns = _ref.columns,
+    width = _ref.width;
+  var isScalableWidth = useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
+    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
+      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+    }, column.label));
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "134865897",
+    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+};
+TableHead.displayName = 'TableHead';
+export default TableHead;

package/esm/table/table-types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type TableDataItemBase = Record<string, any>;
+export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
+export type TableAbstractColumn<TableDataItem> = {
+    prop: keyof TableDataItem;
+    label: React.ReactNode | string;
+    className: string;
+    width?: number;
+    renderHandler: TableColumnRender<TableDataItemBase>;
+};
+export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;
+export type TableOnCellClick<TableDataItem> = (cellValue: TableDataItem[keyof TableDataItem], rowIndex: number, colunmIndex: number) => void;
+export type TableOnChange<TableDataItem> = (data: Array<TableDataItem>) => void;
+export type TableRowClassNameHandler<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => string;

package/esm/table/table-types.js

@@ -0,0 +1 @@
+export {};

package/esm/table/table.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from "./table-types";
+interface Props<TableDataItem extends TableDataItemBase> {
+    data?: Array<TableDataItem>;
+    initialData?: Array<TableDataItem>;
+    emptyText?: string;
+    hover?: boolean;
+    onRow?: TableOnRowClick<TableDataItem>;
+    onCell?: TableOnCellClick<TableDataItem>;
+    onChange?: TableOnChange<TableDataItem>;
+    className?: string;
+    rowClassName?: TableRowClassNameHandler<TableDataItem>;
+}
+type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
+export type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
+declare function TableComponent<TableDataItem extends TableDataItemBase>(tableProps: React.PropsWithChildren<TableProps<TableDataItem>>): JSX.Element;
+declare namespace TableComponent {
+    var displayName: string;
+    var Column: {
+        <TableDataItem extends TableDataItemBase>(columnProps: React.PropsWithChildren<import("./table-column").TableColumnProps<TableDataItem>>): null;
+        displayName: string;
+    };
+}
+declare const _default: typeof TableComponent & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any>;
+export default _default;

package/esm/table/table.js

@@ -0,0 +1,104 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "onRow", "onCell", "onChange", "className", "rowClassName"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import TableHead from './table-head';
+import TableBody from './table-body';
+import useRealShape from '../utils/use-real-shape';
+import useResize from '../utils/use-resize';
+import { TableContext } from './table-context';
+import useScale, { withScale } from '../use-scale';
+import TableColumn from './table-column';
+function TableComponent(tableProps) {
+  /* eslint-disable  @typescript-eslint/no-unused-vars */
+  var _ref = tableProps,
+    children = _ref.children,
+    customData = _ref.data,
+    _ref$initialData = _ref.initialData,
+    initialData = _ref$initialData === void 0 ? [] : _ref$initialData,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === void 0 ? true : _ref$hover,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === void 0 ? '' : _ref$emptyText,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$rowClassName = _ref.rowClassName,
+    rowClassName = _ref$rowClassName === void 0 ? function () {
+      return '';
+    } : _ref$rowClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var ref = useRef(null);
+  var _useRealShape = useRealShape(ref),
+    _useRealShape2 = _slicedToArray(_useRealShape, 2),
+    width = _useRealShape2[0].width,
+    updateShape = _useRealShape2[1];
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    columns = _useState2[0],
+    setColumns = _useState2[1];
+  var _useState3 = useState(initialData),
+    _useState4 = _slicedToArray(_useState3, 2),
+    data = _useState4[0],
+    setData = _useState4[1];
+  var updateColumn = function updateColumn(column) {
+    setColumns(function (last) {
+      var hasColumn = last.find(function (item) {
+        return item.prop === column.prop;
+      });
+      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
+      return last.map(function (item) {
+        if (item.prop !== column.prop) return item;
+        return column;
+      });
+    });
+  };
+  var contextValue = useMemo(function () {
+    return {
+      columns: columns,
+      updateColumn: updateColumn
+    };
+  }, [columns]);
+  useEffect(function () {
+    if (typeof customData === 'undefined') return;
+    setData(customData);
+  }, [customData]);
+  useResize(function () {
+    return updateShape();
+  });
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("table", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement(TableHead, {
+    columns: columns,
+    width: width
+  }), /*#__PURE__*/React.createElement(TableBody, {
+    data: data,
+    hover: hover,
+    emptyText: emptyText,
+    onRow: onRow,
+    onCell: onCell,
+    rowClassName: rowClassName
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2132340556",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
+}
+TableComponent.displayName = 'Table';
+TableComponent.Column = TableColumn;
+var Table = withScale(TableComponent);
+Table.Column = TableColumn;
+export default Table;

package/esm/tabs/index.d.ts

@@ -0,0 +1,9 @@
+import Tabs from "./tabs";
+import TabsItem from "./tabs-item";
+export type TabsComponentType = typeof Tabs & {
+    Item: typeof TabsItem;
+    Tab: typeof TabsItem;
+};
+export type { TabsProps } from "./tabs";
+declare const _default: TabsComponentType;
+export default _default;

package/esm/tabs/index.js

@@ -0,0 +1,7 @@
+"use client";
+
+import Tabs from './tabs';
+import TabsItem from './tabs-item';
+Tabs.Item = TabsItem;
+Tabs.Tab = TabsItem;
+export default Tabs;

package/esm/tabs/tabs-context.d.ts

@@ -0,0 +1,21 @@
+import React, { CSSProperties, MouseEvent } from 'react';
+export type TabsInternalCellProps = {
+    onClick: (value: string) => void;
+    onMouseOver: (e: MouseEvent<HTMLDivElement>) => void;
+    activeClassName?: string;
+    activeStyle?: CSSProperties;
+    hideBorder?: boolean;
+};
+export type TabsInternalCell = React.FC<TabsInternalCellProps>;
+export interface TabsHeaderItem {
+    value: string;
+    cell: TabsInternalCell;
+}
+export interface TabsConfig {
+    register?: (item: TabsHeaderItem) => void;
+    currentValue?: string;
+    inGroup: boolean;
+    leftSpace?: CSSProperties['marginLeft'];
+}
+export declare const TabsContext: React.Context<TabsConfig>;
+export declare const useTabsContext: () => TabsConfig;

package/esm/tabs/tabs-context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+var defaultContext = {
+  inGroup: false
+};
+export var TabsContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useTabsContext = function useTabsContext() {
+  return React.useContext(TabsContext);
+};

package/esm/tabs/tabs-item.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+interface Props {
+    label: string | React.ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TabsItemProps = Props & NativeAttrs;
+declare const TabsItem: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default TabsItem;

package/esm/tabs/tabs-item.js

@@ -0,0 +1,71 @@
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useTabsContext } from './tabs-context';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var TabsItemComponent = function TabsItemComponent(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    label = _ref.label,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useTabsContext = useTabsContext(),
+    register = _useTabsContext.register,
+    currentValue = _useTabsContext.currentValue;
+  var isActive = useMemo(function () {
+    return currentValue === value;
+  }, [currentValue, value]);
+  var TabsInternalCell = function TabsInternalCell(_ref2) {
+    var onClick = _ref2.onClick,
+      onMouseOver = _ref2.onMouseOver,
+      activeClassName = _ref2.activeClassName,
+      activeStyle = _ref2.activeStyle,
+      hideBorder = _ref2.hideBorder;
+    var theme = useTheme();
+    var ref = useRef(null);
+    var _useTabsContext2 = useTabsContext(),
+      currentValue = _useTabsContext2.currentValue;
+    var active = currentValue === value;
+    var classes = useClasses('tab', _defineProperty(_defineProperty({
+      active: active,
+      disabled: disabled
+    }, activeClassName, active), 'hide-border', hideBorder));
+    var clickHandler = function clickHandler() {
+      if (disabled) return;
+      onClick && onClick(value);
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      role: "button",
+      key: value,
+      onMouseOver: onMouseOver,
+      onClick: clickHandler,
+      style: active ? activeStyle : {},
+      "data-geist": "tab-item",
+      className: _JSXStyle.dynamic([["2444688710", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
+    }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "2444688710",
+      dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]
+    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;text-transform:capitalize;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
+  };
+  TabsInternalCell.displayName = 'TabsInternalCell';
+  useEffect(function () {
+    register && register({
+      value: value,
+      cell: TabsInternalCell
+    });
+  }, [value, label, disabled]);
+
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return isActive ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
+};
+TabsItemComponent.displayName = 'TabsItem';
+var TabsItem = withScale(TabsItemComponent);
+export default TabsItem;
+/* eslint-enable */