@klodd/kommers-ds 0.1.0

package/dist/cjs/components/select/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./select"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/select/index.ts"],"names":[],"mappings":";;;AAAA,mDAAwB","sourcesContent":["export * from \"./select\"\n"]}

package/dist/cjs/components/select/select.d.ts

@@ -0,0 +1,21 @@
+import { Select as RadixSelect } from "radix-ui";
+import * as React from "react";
+interface SelectProps extends React.ComponentPropsWithoutRef<typeof RadixSelect.Root> {
+    size?: "base" | "small";
+}
+interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof RadixSelect.Content> {
+}
+declare const Select: {
+    ({ children, size, ...props }: SelectProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Group: React.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Value: React.ForwardRefExoticComponent<RadixSelect.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Select };
+//# sourceMappingURL=select.d.ts.map

package/dist/cjs/components/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,WACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACxB;AA+FD,UAAU,kBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;CAAG;AAsIvE,QAAA,MAAM,MAAM;mCAzMT,WAAW;;;;;;;;;;CAiNZ,CAAA;AAEF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/cjs/components/select/select.js

@@ -0,0 +1,117 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const tslib_1 = require("tslib");
+const kommers_icons_1 = require("@klodd/kommers-icons");
+const cva_1 = require("cva");
+const radix_ui_1 = require("radix-ui");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+const SelectContext = React.createContext(null);
+const useSelectContext = () => {
+    const context = React.useContext(SelectContext);
+    if (context === null) {
+        throw new Error("useSelectContext must be used within a SelectProvider");
+    }
+    return context;
+};
+/**
+ * This component is based on [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/select).
+ * It also accepts all props of the HTML `select` component.
+ */
+const Root = ({ children, 
+/**
+ * The select's size.
+ */
+size = "base", ...props }) => {
+    return (React.createElement(SelectContext.Provider, { value: React.useMemo(() => ({ size }), [size]) },
+        React.createElement(radix_ui_1.Select.Root, { ...props }, children)));
+};
+Root.displayName = "Select";
+/**
+ * Groups multiple items together.
+ */
+const Group = radix_ui_1.Select.Group;
+Group.displayName = "Select.Group";
+/**
+ * Displays the selected value, or a placeholder if no value is selected.
+ * It's based on [Radix UI Select Value](https://www.radix-ui.com/primitives/docs/components/select#value).
+ */
+const Value = radix_ui_1.Select.Value;
+Value.displayName = "Select.Value";
+const triggerVariants = (0, cva_1.cva)({
+    base: (0, clx_1.clx)("bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none", "data-[placeholder]:text-ui-fg-muted text-ui-fg-base", "hover:bg-ui-bg-field-hover", "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active", "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error", "invalid:border-ui-border-error invalid:shadow-borders-error", "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled", "group/trigger"),
+    variants: {
+        size: {
+            base: "h-8 px-2 py-1.5 txt-compact-small",
+            small: "h-7 px-2 py-1 txt-compact-small",
+        },
+    },
+});
+/**
+ * The trigger that toggles the select.
+ * It's based on [Radix UI Select Trigger](https://www.radix-ui.com/primitives/docs/components/select#trigger).
+ */
+const Trigger = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { size } = useSelectContext();
+    return (React.createElement(radix_ui_1.Select.Trigger, { ref: ref, className: (0, clx_1.clx)(triggerVariants({ size }), className), ...props },
+        children,
+        React.createElement(radix_ui_1.Select.Icon, { asChild: true },
+            React.createElement(kommers_icons_1.TrianglesMini, { className: "text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled" }))));
+});
+Trigger.displayName = "Select.Trigger";
+/**
+ * The content that appears when the select is open.
+ * It's based on [Radix UI Select Content](https://www.radix-ui.com/primitives/docs/components/select#content).
+ */
+const Content = React.forwardRef(({ className, children, onScroll, 
+/**
+ * Whether to show the select items below (`popper`) or over (`item-aligned`) the select input.
+ */
+position = "popper", 
+/**
+ * The distance of the content pop-up in pixels from the select input. Only available when position is set to popper.
+ */
+sideOffset = 8, 
+/**
+ * The distance in pixels from the boundary edges where collision detection should occur. Only available when position is set to popper.
+ */
+collisionPadding = 24, ...props }, ref) => (React.createElement(radix_ui_1.Select.Portal, null,
+    React.createElement(radix_ui_1.Select.Content, { ref: ref, className: (0, clx_1.clx)("bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", {
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1": position === "popper",
+        }, className), position: position, sideOffset: sideOffset, collisionPadding: collisionPadding, ...props },
+        React.createElement(radix_ui_1.Select.Viewport, { className: (0, clx_1.clx)("p-1", position === "popper" &&
+                "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), onScroll: onScroll }, children)))));
+Content.displayName = "Select.Content";
+/**
+ * Used to label a group of items.
+ * It's based on [Radix UI Select Label](https://www.radix-ui.com/primitives/docs/components/select#label).
+ */
+const Label = React.forwardRef(({ className, ...props }, ref) => (React.createElement(radix_ui_1.Select.Label, { ref: ref, className: (0, clx_1.clx)("txt-compact-xsmall-plus text-ui-fg-muted px-2 py-1.5", className), ...props })));
+Label.displayName = "Select.Label";
+/**
+ * An item in the select. It's based on [Radix UI Select Item](https://www.radix-ui.com/primitives/docs/components/select#item)
+ * and accepts its props.
+ */
+const Item = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (React.createElement(radix_ui_1.Select.Item, { ref: ref, className: (0, clx_1.clx)("bg-ui-bg-component txt-compact-small grid cursor-pointer grid-cols-[15px_1fr] items-center gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors", "focus-visible:bg-ui-bg-component-hover", "active:bg-ui-bg-component-pressed", "data-[state=checked]:txt-compact-small-plus", "disabled:text-ui-fg-disabled", className), ...props },
+        React.createElement("span", { className: "flex h-[15px] w-[15px] items-center justify-center" },
+            React.createElement(radix_ui_1.Select.ItemIndicator, { className: "flex items-center justify-center" },
+                React.createElement(kommers_icons_1.Check, null))),
+        React.createElement(radix_ui_1.Select.ItemText, { className: "flex-1 truncate" }, children)));
+});
+Item.displayName = "Select.Item";
+const Separator = React.forwardRef(({ className, ...props }, ref) => (React.createElement(radix_ui_1.Select.Separator, { ref: ref, className: (0, clx_1.clx)("bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t", className), ...props })));
+Separator.displayName = "Select.Separator";
+const Select = Object.assign(Root, {
+    Group,
+    Value,
+    Trigger,
+    Content,
+    Label,
+    Item,
+    Separator,
+});
+exports.Select = Select;
+//# sourceMappingURL=select.js.map

package/dist/cjs/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport { Check, TrianglesMini } from \"@klodd/kommers-icons\"\nimport { cva } from \"cva\"\nimport { Select as RadixSelect } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\ninterface SelectProps\n  extends React.ComponentPropsWithoutRef<typeof RadixSelect.Root> {\n  size?: \"base\" | \"small\"\n}\n\ntype SelectContextValue = {\n  size: \"base\" | \"small\"\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null)\n\nconst useSelectContext = () => {\n  const context = React.useContext(SelectContext)\n\n  if (context === null) {\n    throw new Error(\"useSelectContext must be used within a SelectProvider\")\n  }\n\n  return context\n}\n\n/**\n * This component is based on [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/select).\n * It also accepts all props of the HTML `select` component.\n */\nconst Root = ({\n  children,\n  /**\n   * The select's size.\n   */\n  size = \"base\",\n  ...props\n}: SelectProps) => {\n  return (\n    <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>\n      <RadixSelect.Root {...props}>{children}</RadixSelect.Root>\n    </SelectContext.Provider>\n  )\n}\nRoot.displayName = \"Select\"\n\n/**\n * Groups multiple items together.\n */\nconst Group = RadixSelect.Group\nGroup.displayName = \"Select.Group\"\n\n/**\n * Displays the selected value, or a placeholder if no value is selected.\n * It's based on [Radix UI Select Value](https://www.radix-ui.com/primitives/docs/components/select#value).\n */\nconst Value = RadixSelect.Value\nValue.displayName = \"Select.Value\"\n\nconst triggerVariants = cva({\n  base: clx(\n    \"bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none\",\n    \"data-[placeholder]:text-ui-fg-muted text-ui-fg-base\",\n    \"hover:bg-ui-bg-field-hover\",\n    \"focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active\",\n    \"aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error\",\n    \"invalid:border-ui-border-error invalid:shadow-borders-error\",\n    \"disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled\",\n    \"group/trigger\"\n  ),\n  variants: {\n    size: {\n      base: \"h-8 px-2 py-1.5 txt-compact-small\",\n      small: \"h-7 px-2 py-1 txt-compact-small\",\n    },\n  },\n})\n\n/**\n * The trigger that toggles the select.\n * It's based on [Radix UI Select Trigger](https://www.radix-ui.com/primitives/docs/components/select#trigger).\n */\nconst Trigger = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Trigger>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>\n>(({ className, children, ...props }, ref) => {\n  const { size } = useSelectContext()\n\n  return (\n    <RadixSelect.Trigger\n      ref={ref}\n      className={clx(triggerVariants({ size }), className)}\n      {...props}\n    >\n      {children}\n      <RadixSelect.Icon asChild>\n        <TrianglesMini className=\"text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled\" />\n      </RadixSelect.Icon>\n    </RadixSelect.Trigger>\n  )\n})\nTrigger.displayName = \"Select.Trigger\"\n\ninterface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof RadixSelect.Content> {}\n\n/**\n * The content that appears when the select is open.\n * It's based on [Radix UI Select Content](https://www.radix-ui.com/primitives/docs/components/select#content).\n */\nconst Content = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Content>,\n  SelectContentProps\n>(\n  (\n    {\n      className,\n      children,\n      onScroll,\n      /**\n       * Whether to show the select items below (`popper`) or over (`item-aligned`) the select input.\n       */\n      position = \"popper\",\n      /**\n       * The distance of the content pop-up in pixels from the select input. Only available when position is set to popper.\n       */\n      sideOffset = 8,\n      /**\n       * The distance in pixels from the boundary edges where collision detection should occur. Only available when position is set to popper.\n       */\n      collisionPadding = 24,\n      ...props\n    }: SelectContentProps,\n    ref\n  ) => (\n    <RadixSelect.Portal>\n      <RadixSelect.Content\n        ref={ref}\n        className={clx(\n          \"bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg\",\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          {\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\":\n              position === \"popper\",\n          },\n          className\n        )}\n        position={position}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        {...props}\n      >\n        <RadixSelect.Viewport\n          className={clx(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n          )}\n          onScroll={onScroll}\n        >\n          {children}\n        </RadixSelect.Viewport>\n      </RadixSelect.Content>\n    </RadixSelect.Portal>\n  )\n)\nContent.displayName = \"Select.Content\"\n\n/**\n * Used to label a group of items.\n * It's based on [Radix UI Select Label](https://www.radix-ui.com/primitives/docs/components/select#label).\n */\nconst Label = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Label>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Label>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Label\n    ref={ref}\n    className={clx(\n      \"txt-compact-xsmall-plus text-ui-fg-muted px-2 py-1.5\",\n      className\n    )}\n    {...props}\n  />\n))\nLabel.displayName = \"Select.Label\"\n\n/**\n * An item in the select. It's based on [Radix UI Select Item](https://www.radix-ui.com/primitives/docs/components/select#item)\n * and accepts its props.\n */\nconst Item = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Item>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Item>\n>(({ className, children, ...props }, ref) => {\n  return (\n    <RadixSelect.Item\n      ref={ref}\n      className={clx(\n        \"bg-ui-bg-component txt-compact-small grid cursor-pointer grid-cols-[15px_1fr] items-center gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors\",\n        \"focus-visible:bg-ui-bg-component-hover\",\n        \"active:bg-ui-bg-component-pressed\",\n        \"data-[state=checked]:txt-compact-small-plus\",\n        \"disabled:text-ui-fg-disabled\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex h-[15px] w-[15px] items-center justify-center\">\n        <RadixSelect.ItemIndicator className=\"flex items-center justify-center\">\n          <Check />\n        </RadixSelect.ItemIndicator>\n      </span>\n      <RadixSelect.ItemText className=\"flex-1 truncate\">\n        {children}\n      </RadixSelect.ItemText>\n    </RadixSelect.Item>\n  )\n})\nItem.displayName = \"Select.Item\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Separator>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Separator\n    ref={ref}\n    className={clx(\n      \"bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t\",\n      className\n    )}\n    {...props}\n  />\n))\nSeparator.displayName = \"Select.Separator\"\n\nconst Select = Object.assign(Root, {\n  Group,\n  Value,\n  Trigger,\n  Content,\n  Label,\n  Item,\n  Separator,\n})\n\nexport { Select }\n"]}

package/dist/cjs/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./skeleton";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/cjs/components/skeleton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./skeleton"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/skeleton/index.ts"],"names":[],"mappings":";;;AAAA,qDAA2B","sourcesContent":["export * from \"./skeleton\";\n"]}

package/dist/cjs/components/skeleton/skeleton.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/cjs/components/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,qBAOtC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/cjs/components/skeleton/skeleton.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = Skeleton;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+function Skeleton({ className, ...props }) {
+    return (React.createElement("div", { className: (0, clx_1.clx)("bg-ui-bg-component animate-pulse rounded-md", className), ...props }));
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/cjs/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":";;AAgBS,4BAAQ;;AAhBjB,qDAA8B;AAE9B,qCAAiC;AAEjC,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAC6B;IACrC,OAAO,CACL,6BACE,SAAS,EAAE,IAAA,SAAG,EAAC,6CAA6C,EAAE,SAAS,CAAC,KACpE,KAAK,GACT,CACH,CAAA;AACH,CAAC","sourcesContent":["import * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={clx(\"bg-ui-bg-component animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"]}

package/dist/cjs/components/status-badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./status-badge";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/status-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/status-badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/cjs/components/status-badge/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./status-badge"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/status-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/status-badge/index.ts"],"names":[],"mappings":";;;AAAA,yDAA8B","sourcesContent":["export * from \"./status-badge\"\n"]}

package/dist/cjs/components/status-badge/status-badge.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { VariantProps } from "cva";
+declare const statusBadgeVariants: (props?: ({
+    color?: "green" | "red" | "blue" | "orange" | "grey" | "purple" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface StatusBadgeProps extends Omit<React.ComponentPropsWithoutRef<"span">, "color">, VariantProps<typeof statusBadgeVariants> {
+}
+/**
+ * This component is based on the span element and supports all of its props
+ */
+declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { StatusBadge };
+//# sourceMappingURL=status-badge.d.ts.map

package/dist/cjs/components/status-badge/status-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../../../src/components/status-badge/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,YAAY,EAAO,MAAM,KAAK,CAAA;AAEvC,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAevB,CAAA;AAEF,UAAU,gBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,EAC3D,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C;;GAEG;AACH,QAAA,MAAM,WAAW,0FA6BhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/cjs/components/status-badge/status-badge.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBadge = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+const cva_1 = require("cva");
+const statusBadgeVariants = (0, cva_1.cva)({
+    base: "flex items-center justify-center w-5 h-[18px] [&_div]:w-2 [&_div]:h-2 [&_div]:rounded-sm",
+    variants: {
+        color: {
+            green: "[&_div]:bg-ui-tag-green-icon",
+            red: "[&_div]:bg-ui-tag-red-icon",
+            orange: "[&_div]:bg-ui-tag-orange-icon",
+            blue: "[&_div]:bg-ui-tag-blue-icon",
+            purple: "[&_div]:bg-ui-tag-purple-icon",
+            grey: "[&_div]:bg-ui-tag-neutral-icon",
+        },
+    },
+    defaultVariants: {
+        color: "grey",
+    },
+});
+/**
+ * This component is based on the span element and supports all of its props
+ */
+const StatusBadge = React.forwardRef(({ children, className, 
+/**
+ * The status's color.
+ */
+color = "grey", ...props }, ref) => {
+    return (React.createElement("span", { ref: ref, className: (0, clx_1.clx)("txt-compact-xsmall-plus bg-ui-bg-subtle text-ui-fg-subtle border-ui-border-base box-border flex w-fit select-none items-center overflow-hidden rounded-md border pl-0 pr-1 leading-none", className), ...props },
+        React.createElement("div", { role: "presentation", className: statusBadgeVariants({ color }) },
+            React.createElement("div", null)),
+        children));
+});
+exports.StatusBadge = StatusBadge;
+StatusBadge.displayName = "StatusBadge";
+//# sourceMappingURL=status-badge.js.map

package/dist/cjs/components/status-badge/status-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.js","sourceRoot":"","sources":["../../../../src/components/status-badge/status-badge.tsx"],"names":[],"mappings":";;;;AAAA,qDAA8B;AAE9B,qCAAiC;AACjC,6BAAuC;AAEvC,MAAM,mBAAmB,GAAG,IAAA,SAAG,EAAC;IAC9B,IAAI,EAAE,0FAA0F;IAChG,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EAAE,8BAA8B;YACrC,GAAG,EAAE,4BAA4B;YACjC,MAAM,EAAE,+BAA+B;YACvC,IAAI,EAAE,6BAA6B;YACnC,MAAM,EAAE,+BAA+B;YACvC,IAAI,EAAE,gCAAgC;SACvC;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAA;AAMF;;GAEG;AACH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,QAAQ,EACR,SAAS;AACT;;GAEG;AACH,KAAK,GAAG,MAAM,EACd,GAAG,KAAK,EACS,EACnB,GAAG,EACH,EAAE;IACF,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,yLAAyL,EACzL,SAAS,CACV,KACG,KAAK;QAET,6BAAK,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,mBAAmB,CAAC,EAAE,KAAK,EAAE,CAAC;YAChE,gCAAO,CACH;QACL,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,kCAAW;AAFpB,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA","sourcesContent":["import * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\nimport { VariantProps, cva } from \"cva\"\n\nconst statusBadgeVariants = cva({\n  base: \"flex items-center justify-center w-5 h-[18px] [&_div]:w-2 [&_div]:h-2 [&_div]:rounded-sm\",\n  variants: {\n    color: {\n      green: \"[&_div]:bg-ui-tag-green-icon\",\n      red: \"[&_div]:bg-ui-tag-red-icon\",\n      orange: \"[&_div]:bg-ui-tag-orange-icon\",\n      blue: \"[&_div]:bg-ui-tag-blue-icon\",\n      purple: \"[&_div]:bg-ui-tag-purple-icon\",\n      grey: \"[&_div]:bg-ui-tag-neutral-icon\",\n    },\n  },\n  defaultVariants: {\n    color: \"grey\",\n  },\n})\n\ninterface StatusBadgeProps\n  extends Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">,\n    VariantProps<typeof statusBadgeVariants> {}\n\n/**\n * This component is based on the span element and supports all of its props\n */\nconst StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(\n  (\n    {\n      children,\n      className,\n      /**\n       * The status's color.\n       */\n      color = \"grey\",\n      ...props\n    }: StatusBadgeProps,\n    ref\n  ) => {\n    return (\n      <span\n        ref={ref}\n        className={clx(\n          \"txt-compact-xsmall-plus bg-ui-bg-subtle text-ui-fg-subtle border-ui-border-base box-border flex w-fit select-none items-center overflow-hidden rounded-md border pl-0 pr-1 leading-none\",\n          className\n        )}\n        {...props}\n      >\n        <div role=\"presentation\" className={statusBadgeVariants({ color })}>\n          <div />\n        </div>\n        {children}\n      </span>\n    )\n  }\n)\nStatusBadge.displayName = \"StatusBadge\"\n\nexport { StatusBadge }\n"]}

package/dist/cjs/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./switch";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/cjs/components/switch/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./switch"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/switch/index.ts"],"names":[],"mappings":";;;AAAA,mDAAwB","sourcesContent":["export * from \"./switch\"\n"]}

package/dist/cjs/components/switch/switch.d.ts

@@ -0,0 +1,68 @@
+import { VariantProps } from "cva";
+import { Switch as RadixSwitch } from "radix-ui";
+import * as React from "react";
+declare const switchVariants: (props?: ({
+    size?: "small" | "base" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>, "asChild">, VariantProps<typeof switchVariants> {
+}
+/**
+ * This component is based on the [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch) primitive.
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };
+//# sourceMappingURL=switch.d.ts.map

package/dist/cjs/components/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAO,MAAM,KAAK,CAAA;AACvC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAWlB,CAAA;AAgBF,UAAU,WACR,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,EACvD,SAAS,CACV,EACD,YAAY,CAAC,OAAO,cAAc,CAAC;CAAG;AAE1C;;GAEG;AACH,QAAA,MAAM,MAAM,uFAuBX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/cjs/components/switch/switch.js

@@ -0,0 +1,45 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const tslib_1 = require("tslib");
+const cva_1 = require("cva");
+const radix_ui_1 = require("radix-ui");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+const switchVariants = (0, cva_1.cva)({
+    base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:opacity-50 group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
+    variants: {
+        size: {
+            small: "h-[16px] w-[28px]",
+            base: "h-[18px] w-[32px]",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+    },
+});
+const thumbVariants = (0, cva_1.cva)({
+    base: "bg-ui-fg-on-color shadow-details-switch-handle pointer-events-none h-[14px] w-[14px] rounded-full transition-all",
+    variants: {
+        size: {
+            small: "h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
+            base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+    },
+});
+/**
+ * This component is based on the [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch) primitive.
+ */
+const Switch = React.forwardRef(({ className, 
+/**
+ * The switch's size.
+ */
+size = "base", ...props }, ref) => (React.createElement(radix_ui_1.Switch.Root, { className: (0, clx_1.clx)(switchVariants({ size }), className), ...props, ref: ref },
+    React.createElement(radix_ui_1.Switch.Thumb, { className: (0, clx_1.clx)(thumbVariants({ size })) }))));
+exports.Switch = Switch;
+Switch.displayName = "Switch";
+//# sourceMappingURL=switch.js.map

package/dist/cjs/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../src/components/switch/switch.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,6BAAuC;AACvC,uCAAgD;AAChD,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,cAAc,GAAG,IAAA,SAAG,EAAC;IACzB,IAAI,EAAE,ugBAAugB;IAC7gB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,mBAAmB;SAC1B;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,IAAA,SAAG,EAAC;IACxB,IAAI,EAAE,kHAAkH;IACxH,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EACH,+FAA+F;YACjG,IAAI,EAAE,kHAAkH;SACzH;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CAAC,CAAA;AASF;;GAEG;AACH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAI7B,CACE,EACE,SAAS;AACT;;GAEG;AACH,IAAI,GAAG,MAAM,EACb,GAAG,KAAK,EACI,EACd,GAAG,EACH,EAAE,CAAC,CACH,oBAAC,iBAAW,CAAC,IAAI,IACf,SAAS,EAAE,IAAA,SAAG,EAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KAC/C,KAAK,EACT,GAAG,EAAE,GAAG;IAER,oBAAC,iBAAW,CAAC,KAAK,IAAC,SAAS,EAAE,IAAA,SAAG,EAAC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,GAAI,CAC7C,CACpB,CACF,CAAA;AAGQ,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA","sourcesContent":["\"use client\"\n\nimport { VariantProps, cva } from \"cva\"\nimport { Switch as RadixSwitch } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst switchVariants = cva({\n  base: \"bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:opacity-50 group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed\",\n  variants: {\n    size: {\n      small: \"h-[16px] w-[28px]\",\n      base: \"h-[18px] w-[32px]\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n})\n\nconst thumbVariants = cva({\n  base: \"bg-ui-fg-on-color shadow-details-switch-handle pointer-events-none h-[14px] w-[14px] rounded-full transition-all\",\n  variants: {\n    size: {\n      small:\n        \"h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5\",\n      base: \"h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n})\n\ninterface SwitchProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>,\n      \"asChild\"\n    >,\n    VariantProps<typeof switchVariants> {}\n\n/**\n * This component is based on the [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch) primitive.\n */\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof RadixSwitch.Root>,\n  SwitchProps\n>(\n  (\n    {\n      className,\n      /**\n       * The switch's size.\n       */\n      size = \"base\",\n      ...props\n    }: SwitchProps,\n    ref\n  ) => (\n    <RadixSwitch.Root\n      className={clx(switchVariants({ size }), className)}\n      {...props}\n      ref={ref}\n    >\n      <RadixSwitch.Thumb className={clx(thumbVariants({ size }))} />\n    </RadixSwitch.Root>\n  )\n)\nSwitch.displayName = \"Switch\"\n\nexport { Switch }\n"]}

package/dist/cjs/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./table";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/dist/cjs/components/table/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./table"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":";;;AAAA,kDAAuB","sourcesContent":["export * from \"./table\"\n"]}

package/dist/cjs/components/table/table.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    count: number;
+    pageSize: number;
+    pageIndex: number;
+    pageCount: number;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    translations?: {
+        of?: string;
+        results?: string;
+        pages?: string;
+        prev?: string;
+        next?: string;
+    };
+    previousPage: () => void;
+    nextPage: () => void;
+}
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>> & {
+    Row: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+    Cell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    HeaderCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Pagination: React.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { Table };
+//# sourceMappingURL=table.d.ts.map

package/dist/cjs/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgG9B,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,OAAO,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE;QACb,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AA6GD,QAAA,MAAM,KAAK;;;;;;;CAOT,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}