@yakad/ui 2.0.1 → 2.0.3

package/dist/Navigation/Navigation.d.ts

@@ -1,9 +1,19 @@
-/// <reference types="react" />
-export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
-    align?: "start" | "space" | "center" | "end";
-    anchor?: "left" | "right" | "top" | "bottom" | "auto";
-    open: boolean;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Navigation({ align, anchor, open, className, children, ...restProps }: NavigationProps): import("react").JSX.Element;
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { type VariantProps } from "class-variance-authority";
+declare const navigationMenuVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type NavigationMenuProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & VariantProps<typeof navigationMenuVariants>;
+declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & VariantProps<(props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLElement>>;
+declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, };
+export type { NavigationMenuProps, };

package/dist/Navigation/Navigation.js

@@ -9,14 +9,161 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import boxingStyles from "../boxing.module.css";
-import styles from "./Navigation.module.css";
-export function Navigation(_a) {
-    var { align, anchor = "auto", open = false, className, children } = _a, restProps = __rest(_a, ["align", "anchor", "open", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.navigation, styles[anchor], {
-        [styles.open]: open,
-    }, className);
-    return (_jsx("nav", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+const navigationMenuVariants = cva([
+    "relative",
+    "z-10",
+    "flex",
+    "max-w-max",
+    "flex-1",
+    "items-center",
+    "justify-center",
+], {
+    variants: {
+        orientation: {
+            horizontal: "flex-row",
+            vertical: "flex-col",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+const navigationMenuTriggerVariants = cva([
+    "group",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "gap-1",
+    "rounded-md",
+    "px-4",
+    "py-2",
+    "text-sm",
+    "font-medium",
+    "outline-none",
+    "transition-colors",
+    "hover:bg-slate-100",
+    "focus-visible:ring-2",
+    "focus-visible:ring-slate-500",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50",
+    "data-[state=open]:bg-slate-100",
+]);
+const navigationMenuLinkVariants = cva([
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "rounded-md",
+    "px-4",
+    "py-2",
+    "text-sm",
+    "font-medium",
+    "outline-none",
+    "transition-colors",
+    "hover:bg-slate-100",
+    "focus-visible:ring-2",
+    "focus-visible:ring-slate-500",
+    "data-[active=true]:bg-slate-100",
+]);
+const NavigationMenu = React.forwardRef((_a, ref) => {
+    var { className, orientation } = _a, props = __rest(_a, ["className", "orientation"]);
+    return (_jsx(NavigationMenuPrimitive.Root, Object.assign({ ref: ref, orientation: orientation, className: navigationMenuVariants({
+            orientation,
+            className,
+        }) }, props)));
+});
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+const NavigationMenuList = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.List, Object.assign({ ref: ref, className: [
+            "group",
+            "flex",
+            "list-none",
+            "items-center",
+            "justify-center",
+            "gap-1",
+            className,
+        ].filter(Boolean).join(" ") }, props)));
+});
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+const NavigationMenuItem = React.forwardRef((_a, ref) => {
+    var props = __rest(_a, []);
+    return (_jsx(NavigationMenuPrimitive.Item, Object.assign({ ref: ref }, props)));
+});
+NavigationMenuItem.displayName = NavigationMenuPrimitive.Item.displayName;
+const NavigationMenuTrigger = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(NavigationMenuPrimitive.Trigger, Object.assign({ ref: ref, className: navigationMenuTriggerVariants({ className }) }, props, { children: [children, _jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] })));
+});
+NavigationMenuTrigger.displayName =
+    NavigationMenuPrimitive.Trigger.displayName;
+const NavigationMenuContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Content, Object.assign({ ref: ref, className: [
+            "absolute",
+            "left-0",
+            "top-full",
+            "w-full",
+            "md:w-auto",
+            "rounded-md",
+            "border",
+            "bg-white",
+            "p-4",
+            "shadow-md",
+            "outline-none",
+            "data-[motion=from-start]:animate-in",
+            "data-[motion=from-end]:animate-in",
+            "data-[motion=to-start]:animate-out",
+            "data-[motion=to-end]:animate-out",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+NavigationMenuContent.displayName =
+    NavigationMenuPrimitive.Content.displayName;
+const NavigationMenuLink = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Link, Object.assign({ ref: ref, className: navigationMenuLinkVariants({ className }) }, props)));
+});
+NavigationMenuLink.displayName = NavigationMenuPrimitive.Link.displayName;
+const NavigationMenuIndicator = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Indicator, Object.assign({ ref: ref, className: [
+            "top-full",
+            "z-[1]",
+            "flex",
+            "h-1.5",
+            "items-end",
+            "justify-center",
+            "overflow-hidden",
+            "data-[state=visible]:animate-in",
+            "data-[state=hidden]:animate-out",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props, { children: _jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-slate-200 shadow-md" }) })));
+});
+NavigationMenuIndicator.displayName =
+    NavigationMenuPrimitive.Indicator.displayName;
+const NavigationMenuViewport = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Viewport, Object.assign({ ref: ref, className: [
+            "origin-top-center",
+            "relative",
+            "mt-1.5",
+            "h-[var(--radix-navigation-menu-viewport-height)]",
+            "w-full",
+            "overflow-hidden",
+            "rounded-md",
+            "border",
+            "bg-white",
+            "shadow-md",
+            "md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "data-[state=open]:animate-in",
+            "data-[state=closed]:animate-out",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+NavigationMenuViewport.displayName =
+    NavigationMenuPrimitive.Viewport.displayName;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, };

package/dist/RadioGroup/RadioGroup.d.ts

@@ -1,12 +1,19 @@
-/// <reference types="react" />
-import { RadioButtonProps } from "..";
-type RadioButtonElement = React.ReactElement<RadioButtonProps>;
-type ExcludedTypes = "defaultValue" | "children";
-export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, ExcludedTypes> {
-    name: string;
-    defaultValue?: string;
-    children?: RadioButtonElement | RadioButtonElement[];
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function RadioGroup({ name, defaultValue, className, children, ...restProps }: RadioGroupProps): import("react").JSX.Element;
-export {};
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type VariantProps } from "class-variance-authority";
+declare const radioGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const radioGroupItemVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & VariantProps<typeof radioGroupVariants>;
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & VariantProps<typeof radioGroupItemVariants>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem, radioGroupVariants, radioGroupItemVariants, };
+export type { RadioGroupProps, RadioGroupItemProps, };

package/dist/RadioGroup/RadioGroup.js

@@ -1,4 +1,3 @@
-"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,16 +10,64 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, Children } from "react";
-import { RadioButton } from "..";
-export function RadioGroup(_a) {
-    var { name, defaultValue, className, children } = _a, restProps = __rest(_a, ["name", "defaultValue", "className", "children"]);
-    const [selectedValue, setSelectedValue] = useState(defaultValue || null);
-    const arrayChildren = Children.toArray(children);
-    const renderChildrens = () => arrayChildren.map((child, index) => (_jsx(RadioButton, Object.assign({}, child.props, { dataFromRadioGroup: {
-            name: name,
-            onSelect: () => setSelectedValue(child.props.value),
-            checked: selectedValue === child.props.value,
-        } }), index)));
-    return (_jsx("div", Object.assign({}, restProps, { className: className, children: renderChildrens() })));
-}
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva } from "class-variance-authority";
+const radioGroupVariants = cva("grid", {
+    variants: {
+        orientation: {
+            horizontal: "grid-flow-col auto-cols-max gap-4",
+            vertical: "grid-flow-row gap-3",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+const radioGroupItemVariants = cva([
+    "peer",
+    "relative",
+    "shrink-0",
+    "rounded-full",
+    "border",
+    "border-slate-500",
+    "bg-transparent",
+    "outline-none",
+    "transition-colors",
+    "duration-150",
+    "ease-out",
+    "focus-visible:ring-2",
+    "focus-visible:ring-slate-500",
+    "focus-visible:ring-offset-2",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50",
+    "data-[state=checked]:border-slate-900",
+], {
+    variants: {
+        size: {
+            small: "h-4 w-4",
+            medium: "h-[18px] w-[18px]",
+            large: "h-5 w-5",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const RadioGroup = React.forwardRef((_a, ref) => {
+    var { className, orientation } = _a, props = __rest(_a, ["className", "orientation"]);
+    return (_jsx(RadioGroupPrimitive.Root, Object.assign({ ref: ref, orientation: orientation, className: radioGroupVariants({
+            orientation,
+            className,
+        }) }, props)));
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef((_a, ref) => {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: radioGroupItemVariants({
+            size,
+            className,
+        }) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("span", { className: "h-2 w-2 rounded-full bg-slate-900" }) }) })));
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export { RadioGroup, RadioGroupItem, radioGroupVariants, radioGroupItemVariants, };

package/dist/Separator/Separator.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { type VariantProps } from "class-variance-authority";
+declare const separatorVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, VariantProps<typeof separatorVariants> {
+    ref?: React.Ref<React.ElementRef<typeof SeparatorPrimitive.Root>>;
+}
+export declare function Separator({ orientation, decorative, className, ref, ...restProps }: SeparatorProps): React.JSX.Element;
+export {};

package/dist/Separator/Separator.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva } from "class-variance-authority";
+const separatorVariants = cva("shrink-0 bg-border");
+export function Separator(_a) {
+    var { orientation = "horizontal", decorative = true, className, ref } = _a, restProps = __rest(_a, ["orientation", "decorative", "className", "ref"]);
+    return (_jsx(SeparatorPrimitive.Root, Object.assign({ ref: ref, orientation: orientation, decorative: decorative, className: separatorVariants({
+            className: [
+                orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+                className,
+            ],
+        }) }, restProps)));
+}

package/dist/Table/Table.d.ts

@@ -1,36 +1,18 @@
-/// <reference types="react" />
-export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLTableElement>;
-}
-export declare function Table({ className, children, ...restProps }: TableProps): import("react").JSX.Element;
-export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLTableSectionElement>;
-}
-export declare function Thead({ className, children, ...restProps }: TheadProps): import("react").JSX.Element;
-export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLTableSectionElement>;
-}
-export declare function Tbody({ className, children, ...restProps }: TbodyProps): import("react").JSX.Element;
-export interface TfootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLTableSectionElement>;
-}
-export declare function Tfoot({ className, children, ...restProps }: TfootProps): import("react").JSX.Element;
-export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLTableRowElement>;
-}
-export declare function Tr({ className, children, ...restProps }: TrProps): import("react").JSX.Element;
-export interface ThProps extends React.HTMLAttributes<HTMLTableCellElement> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLTableCellElement>;
-}
-export declare function Th({ className, children, ...restProps }: ThProps): import("react").JSX.Element;
-export interface TdProps extends React.HTMLAttributes<HTMLTableCellElement> {
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLTableCellElement>;
-}
-export declare function Td({ className, children, ...restProps }: TdProps): import("react").JSX.Element;
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const tableVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type TableProps = React.ComponentPropsWithoutRef<"table"> & VariantProps<typeof tableVariants>;
+declare const Table: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & VariantProps<(props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, tableVariants, };
+export type { TableProps, };

package/dist/Table/Table.js

@@ -10,41 +10,93 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import boxingStyles from "../boxing.module.css";
-import styles from "./Table.module.css";
-export function Table(_a) {
-    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.table, className);
-    return (_jsx("table", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
-export function Thead(_a) {
-    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames(styles.thead, className);
-    return (_jsx("thead", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
-export function Tbody(_a) {
-    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames(styles.tbody, className);
-    return (_jsx("tbody", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
-export function Tfoot(_a) {
-    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames(styles.tfoot, className);
-    return (_jsx("tfoot", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
-export function Tr(_a) {
-    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames(styles.tr, className);
-    return (_jsx("tr", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
-export function Th(_a) {
-    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames(styles.th, className);
-    return (_jsx("th", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
-export function Td(_a) {
-    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames(styles.td, className);
-    return (_jsx("td", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}
+import * as React from "react";
+import { cva } from "class-variance-authority";
+const tableVariants = cva("w-full caption-bottom text-sm", {
+    variants: {
+        size: {
+            small: "[&_th]:h-8 [&_th]:px-3 [&_td]:px-3 [&_td]:py-2",
+            medium: "[&_th]:h-10 [&_th]:px-4 [&_td]:px-4 [&_td]:py-3",
+            large: "[&_th]:h-12 [&_th]:px-5 [&_td]:px-5 [&_td]:py-4",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const Table = React.forwardRef((_a, ref) => {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", Object.assign({ ref: ref, className: tableVariants({
+                size,
+                className,
+            }) }, props)) }));
+});
+Table.displayName = "Table";
+const TableHeader = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("thead", Object.assign({ ref: ref, className: [
+            "[&_tr]:border-b",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("tbody", Object.assign({ ref: ref, className: [
+            "[&_tr:last-child]:border-0",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("tfoot", Object.assign({ ref: ref, className: [
+            "border-t",
+            "font-medium",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("tr", Object.assign({ ref: ref, className: [
+            "border-b",
+            "transition-colors",
+            "hover:bg-slate-50",
+            "data-[state=selected]:bg-slate-100",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("th", Object.assign({ ref: ref, className: [
+            "text-left",
+            "align-middle",
+            "font-medium",
+            "text-slate-600",
+            "[&:has([role=checkbox])]:pr-0",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("td", Object.assign({ ref: ref, className: [
+            "align-middle",
+            "[&:has([role=checkbox])]:pr-0",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("caption", Object.assign({ ref: ref, className: [
+            "mt-4",
+            "text-sm",
+            "text-slate-500",
+            className !== null && className !== void 0 ? className : "",
+        ].join(" ") }, props)));
+});
+TableCaption.displayName = "TableCaption";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, tableVariants, };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export * from "./Stack/Stack";
 export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
 export * from "./Card/Card";
-export * from "./Spacer/Spacer";
+export * from "./Separator/Separator";
 export * from "./Hr/Hr";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
@@ -17,17 +17,11 @@ export * from "./Table/Table";
 export * from "./Button/Button";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
-export * from "./Form/Form";
+export * from "./Label/Label";
 export * from "./Input/Input";
 export * from "./CheckBox/CheckBox";
-export * from "./CodeField/CodeField";
 export * from "./RadioGroup/RadioGroup";
-export * from "./RadioButton/RadioButton";
-export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
-export * from "./WithOverlay/WithOverlay";
 export * from "./RenderByScroll/RenderByScroll";
 export * from "./ActiveOnVisible/ActiveOnVisible";
-export * from "./Dropdown/Dropdown";
-export * from "./Popup/Popup";
 export * from "./Avatar/Avatar";

package/dist/index.js

@@ -11,7 +11,7 @@ export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
 export * from "./Card/Card"; // Stack Based
 // Theme & Styling
-export * from "./Spacer/Spacer";
+export * from "./Separator/Separator";
 export * from "./Hr/Hr";
 // UI Components
 export * from "./List/List";
@@ -20,20 +20,14 @@ export * from "./Table/Table";
 export * from "./Button/Button";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
+export * from "./Label/Label";
 // Form Components
-export * from "./Form/Form";
 export * from "./Input/Input";
 export * from "./CheckBox/CheckBox";
-export * from "./CodeField/CodeField";
 export * from "./RadioGroup/RadioGroup";
-export * from "./RadioButton/RadioButton";
-export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display"; // Stack Based
-export * from "./WithOverlay/WithOverlay";
 export * from "./RenderByScroll/RenderByScroll"; // Stack Based
 export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 // Overlays
-export * from "./Dropdown/Dropdown"; // Card Based
-export * from "./Popup/Popup"; // Card Based
 export * from "./Avatar/Avatar";