@a2v2ai/uikit 0.0.22 → 0.0.24

package/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 type InputSize = "mini" | "small" | "regular" | "large";
 type InputRoundness = "default" | "round";
 type InputVariant = "default" | "error";
@@ -11,6 +12,9 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     size?: InputSize;
     roundness?: InputRoundness;
     variant?: InputVariant;
+    label?: string;
+    labelVariant?: TextVariant;
+    labelColor?: TextColor;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     leftAddon?: React.ReactNode;

package/Input/Input.js

@@ -39,6 +39,7 @@ const React = __importStar(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
 const Typography_1 = require("../Typography/Typography");
+const Label_1 = require("../Label/Label");
 const inputVariants = (0, class_variance_authority_1.cva)("flex w-full bg-white border font-normal font-sans transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50", {
     variants: {
         size: {
@@ -63,15 +64,15 @@ const inputVariants = (0, class_variance_authority_1.cva)("flex w-full bg-white
     },
 });
 exports.inputVariants = inputVariants;
-const Input = React.forwardRef(({ className, type = "text", size, roundness, variant, leftIcon, rightIcon, leftAddon, rightAddon, rightElement, error, ...props }, ref) => {
+const Input = React.forwardRef(({ className, type = "text", size, roundness, variant, label, labelVariant, labelColor, leftIcon, rightIcon, leftAddon, rightAddon, rightElement, error, id, ...props }, ref) => {
     const hasAddons = leftIcon || rightIcon || leftAddon || rightAddon || rightElement;
     const computedVariant = error ? "error" : variant;
     if (hasAddons) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 bg-white border font-sans transition-colors w-full", "focus-within:ring-[3px]", computedVariant === "error"
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, textVariant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 bg-white border font-sans transition-colors w-full", "focus-within:ring-[3px]", computedVariant === "error"
                         ? "border-error-500 focus-within:border-error-500 focus-within:ring-error-200"
-                        : "border-grey-300 focus-within:border-grey-300 focus-within:ring-grey-300/50", size === "mini" && "h-6 pl-3 pr-0.5 text-xs rounded-md", size === "small" && "h-8 pl-3 pr-0.5 text-sm rounded-md", size === "regular" && "h-9 pl-3 pr-0.5 text-sm rounded-lg", size === "large" && "h-10 pl-3 pr-0.5 text-base rounded-lg", !size && "h-9 pl-3 pr-0.5 text-sm rounded-lg", !rightElement && "pr-3", roundness === "round" && "!rounded-full", props.disabled && "opacity-50 cursor-not-allowed bg-grey-50", className), children: [leftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: leftIcon })), leftAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: leftAddon })), (0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)("flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-grey-400", "disabled:cursor-not-allowed"), ref: ref, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: rightAddon })), rightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: rightIcon })), rightElement && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: rightElement }))] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
+                        : "border-grey-300 focus-within:border-grey-300 focus-within:ring-grey-300/50", size === "mini" && "h-6 pl-3 pr-0.5 text-xs rounded-md", size === "small" && "h-8 pl-3 pr-0.5 text-sm rounded-md", size === "regular" && "h-9 pl-3 pr-0.5 text-sm rounded-lg", size === "large" && "h-10 pl-3 pr-0.5 text-base rounded-lg", !size && "h-9 pl-3 pr-0.5 text-sm rounded-lg", !rightElement && "pr-3", roundness === "round" && "!rounded-full", props.disabled && "opacity-50 cursor-not-allowed bg-grey-50", className), children: [leftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: leftIcon })), leftAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: leftAddon })), (0, jsx_runtime_1.jsx)("input", { type: type, id: id, className: (0, utils_1.cn)("flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-grey-400", "disabled:cursor-not-allowed"), ref: ref, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: rightAddon })), rightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: rightIcon })), rightElement && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: rightElement }))] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)(inputVariants({ size, roundness, variant: computedVariant, className })), ref: ref, ...props }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, textVariant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsx)("input", { type: type, id: id, className: (0, utils_1.cn)(inputVariants({ size, roundness, variant: computedVariant, className })), ref: ref, ...props }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
 });
 exports.Input = Input;
 Input.displayName = "Input";

package/Label/Label.d.ts

@@ -1,12 +1,13 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-type LabelVariant = "default" | "muted" | "error";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 declare const labelVariants: (props?: ({
-    variant?: "default" | "error" | "muted" | null | undefined;
+    textVariant?: TextVariant | null | undefined;
+    color?: TextColor | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
-    variant?: LabelVariant;
+    textVariant?: TextVariant;
+    color?: TextColor;
 }
 declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 export { Label, labelVariants };
-export type { LabelVariant };

package/Label/Label.js

@@ -39,19 +39,18 @@ const React = __importStar(require("react"));
 const LabelPrimitive = __importStar(require("@radix-ui/react-label"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
-const labelVariants = (0, class_variance_authority_1.cva)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", {
+const typography_types_1 = require("../lib/typography-types");
+const labelVariants = (0, class_variance_authority_1.cva)("font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", {
     variants: {
-        variant: {
-            default: "text-main-950",
-            muted: "text-grey-500",
-            error: "text-error-600",
-        },
+        textVariant: typography_types_1.textVariantClasses,
+        color: typography_types_1.textColorClasses,
     },
     defaultVariants: {
-        variant: "default",
+        textVariant: undefined,
+        color: "main-950",
     },
 });
 exports.labelVariants = labelVariants;
-const Label = React.forwardRef(({ className, variant, ...props }, ref) => ((0, jsx_runtime_1.jsx)(LabelPrimitive.Root, { ref: ref, className: (0, utils_1.cn)(labelVariants({ variant }), className), ...props })));
+const Label = React.forwardRef(({ className, textVariant, color, ...props }, ref) => ((0, jsx_runtime_1.jsx)(LabelPrimitive.Root, { ref: ref, className: (0, utils_1.cn)(labelVariants({ textVariant, color }), className), ...props })));
 exports.Label = Label;
 Label.displayName = LabelPrimitive.Root.displayName;

package/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 type SelectTriggerSize = "small" | "regular" | "large";
 type SelectTriggerVariant = "default" | "error";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
@@ -12,6 +13,9 @@ declare const selectTriggerVariants: (props?: ({
 export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
     size?: SelectTriggerSize;
     variant?: SelectTriggerVariant;
+    label?: string;
+    labelVariant?: TextVariant;
+    labelColor?: TextColor;
     error?: string;
 }
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/Select/Select.js

@@ -41,6 +41,7 @@ const lucide_react_1 = require("lucide-react");
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
 const Typography_1 = require("../Typography/Typography");
+const Label_1 = require("../Label/Label");
 const Select = SelectPrimitive.Root;
 exports.Select = Select;
 const SelectGroup = SelectPrimitive.Group;
@@ -65,9 +66,9 @@ const selectTriggerVariants = (0, class_variance_authority_1.cva)("flex w-full i
     },
 });
 exports.selectTriggerVariants = selectTriggerVariants;
-const SelectTrigger = React.forwardRef(({ className, size, variant, error, children, ...props }, ref) => {
+const SelectTrigger = React.forwardRef(({ className, size, variant, label, labelVariant, labelColor, error, children, id, ...props }, ref) => {
     const computedVariant = error ? "error" : variant;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)(selectTriggerVariants({ size, variant: computedVariant }), className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4 opacity-50" }) })] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, textVariant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, id: id, className: (0, utils_1.cn)(selectTriggerVariants({ size, variant: computedVariant }), className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4 opacity-50" }) })] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
 });
 exports.SelectTrigger = SelectTrigger;
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

package/Sidebar/Sidebar.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+interface SidebarContextValue {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+}
+declare function useSidebar(): SidebarContextValue;
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    defaultCollapsed?: boolean;
+}
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+export type SidebarHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type SidebarContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLDivElement>>;
+export type SidebarFooterProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
+export type SidebarGroupProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SidebarGroup: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export type SidebarGroupLabelProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<SidebarGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const sidebarMenuItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface SidebarMenuItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sidebarMenuItemVariants> {
+    icon?: React.ReactNode;
+    label: string;
+    badge?: React.ReactNode;
+    hasChildren?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+}
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<SidebarMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const sidebarSubMenuItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface SidebarSubMenuItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sidebarSubMenuItemVariants> {
+    label: string;
+}
+declare const SidebarSubMenuItem: React.ForwardRefExoticComponent<SidebarSubMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export type SidebarSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SidebarSeparator: React.ForwardRefExoticComponent<SidebarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export type SidebarToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const SidebarToggle: React.ForwardRefExoticComponent<SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarMenuItem, SidebarSubMenuItem, SidebarSeparator, SidebarToggle, useSidebar, sidebarMenuItemVariants, sidebarSubMenuItemVariants, };

package/Sidebar/Sidebar.js

@@ -0,0 +1,161 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarSubMenuItemVariants = exports.sidebarMenuItemVariants = exports.SidebarToggle = exports.SidebarSeparator = exports.SidebarSubMenuItem = exports.SidebarMenuItem = exports.SidebarGroupLabel = exports.SidebarGroup = exports.SidebarFooter = exports.SidebarContent = exports.SidebarHeader = exports.Sidebar = void 0;
+exports.useSidebar = useSidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const class_variance_authority_1 = require("class-variance-authority");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../lib/utils");
+const SidebarContext = React.createContext(undefined);
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error("useSidebar must be used within a Sidebar");
+    }
+    return context;
+}
+const Sidebar = React.forwardRef(({ className, collapsed: controlledCollapsed, onCollapsedChange, defaultCollapsed = false, children, ...props }, ref) => {
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React.useState(defaultCollapsed);
+    const isControlled = controlledCollapsed !== undefined;
+    const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
+    const setCollapsed = React.useCallback((value) => {
+        if (!isControlled) {
+            setUncontrolledCollapsed(value);
+        }
+        onCollapsedChange?.(value);
+    }, [isControlled, onCollapsedChange]);
+    return ((0, jsx_runtime_1.jsx)(SidebarContext.Provider, { value: { collapsed, setCollapsed }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar", "data-collapsed": collapsed, className: (0, utils_1.cn)("flex h-full flex-col bg-white border-r border-grey-200 transition-all duration-300", collapsed ? "w-[52px]" : "w-[240px]", className), ...props, children: children }) }));
+});
+exports.Sidebar = Sidebar;
+Sidebar.displayName = "Sidebar";
+const SidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-header", className: (0, utils_1.cn)("flex shrink-0 items-center", collapsed ? "justify-center p-2" : "p-4", className), ...props, children: children }));
+});
+exports.SidebarHeader = SidebarHeader;
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarContent = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-content", className: (0, utils_1.cn)("flex-1 overflow-y-auto", collapsed ? "px-2 py-4" : "p-4", className), ...props, children: children }));
+});
+exports.SidebarContent = SidebarContent;
+SidebarContent.displayName = "SidebarContent";
+const SidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-footer", className: (0, utils_1.cn)("flex shrink-0 items-center border-t border-grey-200", collapsed ? "justify-center p-2" : "p-4", className), ...props, children: children }));
+});
+exports.SidebarFooter = SidebarFooter;
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarGroup = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-group", className: (0, utils_1.cn)("flex flex-col", collapsed ? "gap-1" : "gap-0.5", className), ...props, children: children }));
+});
+exports.SidebarGroup = SidebarGroup;
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupLabel = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    if (collapsed)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-group-label", className: (0, utils_1.cn)("px-3 py-2 text-xs font-normal text-grey-500", className), ...props, children: children }));
+});
+exports.SidebarGroupLabel = SidebarGroupLabel;
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+/* -----------------------------------------------------------------------------
+ * SidebarMenuItem
+ * -------------------------------------------------------------------------- */
+const sidebarMenuItemVariants = (0, class_variance_authority_1.cva)("flex items-center gap-2 px-3 py-2 rounded-md text-sm font-normal cursor-pointer transition-colors outline-none", {
+    variants: {
+        active: {
+            true: "bg-grey-100 text-grey-900",
+            false: "text-grey-600 hover:bg-grey-50",
+        },
+    },
+    defaultVariants: {
+        active: false,
+    },
+});
+exports.sidebarMenuItemVariants = sidebarMenuItemVariants;
+const SidebarMenuItem = React.forwardRef(({ className, icon, label, badge, active, hasChildren, expanded, onExpandedChange, children, onClick, ...props }, ref) => {
+    const { collapsed } = useSidebar();
+    const [internalExpanded, setInternalExpanded] = React.useState(expanded ?? false);
+    const isExpanded = expanded !== undefined ? expanded : internalExpanded;
+    const handleClick = (e) => {
+        if (hasChildren) {
+            const newExpanded = !isExpanded;
+            setInternalExpanded(newExpanded);
+            onExpandedChange?.(newExpanded);
+        }
+        onClick?.(e);
+    };
+    if (collapsed) {
+        return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-menu-item", className: (0, utils_1.cn)("flex items-center justify-center size-9 rounded-lg cursor-pointer transition-colors mx-auto", active ? "bg-grey-100 text-grey-900" : "text-grey-600 hover:bg-grey-50", className), onClick: onClick, ...props, children: icon && (0, jsx_runtime_1.jsx)("span", { className: "size-4", children: icon }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "sidebar-menu-item-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-slot": "sidebar-menu-item", className: (0, utils_1.cn)(sidebarMenuItemVariants({ active }), className), onClick: handleClick, ...props, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "size-4 shrink-0", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 truncate", children: label }), badge && (0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: badge }), hasChildren && ((0, jsx_runtime_1.jsx)("span", { className: "size-4 shrink-0 text-grey-400", children: isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "size-4" }) }))] }), hasChildren && isExpanded && children && ((0, jsx_runtime_1.jsx)("div", { className: "ml-6 mt-1 flex flex-col", children: children }))] }));
+});
+exports.SidebarMenuItem = SidebarMenuItem;
+SidebarMenuItem.displayName = "SidebarMenuItem";
+/* -----------------------------------------------------------------------------
+ * SidebarSubMenuItem
+ * -------------------------------------------------------------------------- */
+const sidebarSubMenuItemVariants = (0, class_variance_authority_1.cva)("flex items-center px-3 py-2 rounded-md text-sm font-normal cursor-pointer transition-colors outline-none", {
+    variants: {
+        active: {
+            true: "bg-grey-100 text-grey-900",
+            false: "text-grey-500 hover:bg-grey-50 hover:text-grey-700",
+        },
+    },
+    defaultVariants: {
+        active: false,
+    },
+});
+exports.sidebarSubMenuItemVariants = sidebarSubMenuItemVariants;
+const SidebarSubMenuItem = React.forwardRef(({ className, label, active, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-sub-menu-item", className: (0, utils_1.cn)(sidebarSubMenuItemVariants({ active }), className), ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: label }) }));
+});
+exports.SidebarSubMenuItem = SidebarSubMenuItem;
+SidebarSubMenuItem.displayName = "SidebarSubMenuItem";
+const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "sidebar-separator", className: (0, utils_1.cn)("my-2 h-px bg-grey-200", className), ...props }));
+});
+exports.SidebarSeparator = SidebarSeparator;
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarToggle = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { collapsed, setCollapsed } = useSidebar();
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, "data-slot": "sidebar-toggle", type: "button", className: (0, utils_1.cn)("flex items-center justify-center p-2 rounded-md text-grey-500 hover:bg-grey-100 hover:text-grey-700 transition-colors", className), onClick: () => setCollapsed(!collapsed), ...props, children: children }));
+});
+exports.SidebarToggle = SidebarToggle;
+SidebarToggle.displayName = "SidebarToggle";

package/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarMenuItem, SidebarSubMenuItem, SidebarSeparator, SidebarToggle, useSidebar, sidebarMenuItemVariants, sidebarSubMenuItemVariants, } from "./Sidebar";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarGroupLabelProps, SidebarMenuItemProps, SidebarSubMenuItemProps, SidebarSeparatorProps, SidebarToggleProps, } from "./Sidebar";

package/Sidebar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarSubMenuItemVariants = exports.sidebarMenuItemVariants = exports.useSidebar = exports.SidebarToggle = exports.SidebarSeparator = exports.SidebarSubMenuItem = exports.SidebarMenuItem = exports.SidebarGroupLabel = exports.SidebarGroup = exports.SidebarFooter = exports.SidebarContent = exports.SidebarHeader = exports.Sidebar = void 0;
+var Sidebar_1 = require("./Sidebar");
+Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return Sidebar_1.Sidebar; } });
+Object.defineProperty(exports, "SidebarHeader", { enumerable: true, get: function () { return Sidebar_1.SidebarHeader; } });
+Object.defineProperty(exports, "SidebarContent", { enumerable: true, get: function () { return Sidebar_1.SidebarContent; } });
+Object.defineProperty(exports, "SidebarFooter", { enumerable: true, get: function () { return Sidebar_1.SidebarFooter; } });
+Object.defineProperty(exports, "SidebarGroup", { enumerable: true, get: function () { return Sidebar_1.SidebarGroup; } });
+Object.defineProperty(exports, "SidebarGroupLabel", { enumerable: true, get: function () { return Sidebar_1.SidebarGroupLabel; } });
+Object.defineProperty(exports, "SidebarMenuItem", { enumerable: true, get: function () { return Sidebar_1.SidebarMenuItem; } });
+Object.defineProperty(exports, "SidebarSubMenuItem", { enumerable: true, get: function () { return Sidebar_1.SidebarSubMenuItem; } });
+Object.defineProperty(exports, "SidebarSeparator", { enumerable: true, get: function () { return Sidebar_1.SidebarSeparator; } });
+Object.defineProperty(exports, "SidebarToggle", { enumerable: true, get: function () { return Sidebar_1.SidebarToggle; } });
+Object.defineProperty(exports, "useSidebar", { enumerable: true, get: function () { return Sidebar_1.useSidebar; } });
+Object.defineProperty(exports, "sidebarMenuItemVariants", { enumerable: true, get: function () { return Sidebar_1.sidebarMenuItemVariants; } });
+Object.defineProperty(exports, "sidebarSubMenuItemVariants", { enumerable: true, get: function () { return Sidebar_1.sidebarSubMenuItemVariants; } });

package/Textarea/Textarea.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 type TextareaVariant = "default" | "error";
 type TextareaResize = "none" | "vertical" | "horizontal" | "both";
 declare const textareaVariants: (props?: ({
@@ -8,6 +9,9 @@ declare const textareaVariants: (props?: ({
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     variant?: TextareaVariant;
     resize?: TextareaResize;
+    label?: string;
+    labelVariant?: TextVariant;
+    labelColor?: TextColor;
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea, textareaVariants };

package/Textarea/Textarea.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
+const Label_1 = require("../Label/Label");
 const textareaVariants = (0, class_variance_authority_1.cva)("flex min-h-[80px] w-full rounded-lg border bg-white px-3 py-2 text-sm font-normal font-sans transition-colors placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50", {
     variants: {
         variant: {
@@ -57,8 +58,8 @@ const textareaVariants = (0, class_variance_authority_1.cva)("flex min-h-[80px]
     },
 });
 exports.textareaVariants = textareaVariants;
-const Textarea = React.forwardRef(({ className, variant, resize, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("textarea", { className: (0, utils_1.cn)(textareaVariants({ variant, resize }), className), ref: ref, ...props }));
+const Textarea = React.forwardRef(({ className, variant, resize, label, labelVariant, labelColor, id, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, textVariant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsx)("textarea", { id: id, className: (0, utils_1.cn)(textareaVariants({ variant, resize }), className), ref: ref, ...props })] }));
 });
 exports.Textarea = Textarea;
 Textarea.displayName = "Textarea";

package/Typography/Typography.d.ts

@@ -1,11 +1,12 @@
 import * as React from "react";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 declare const typographyVariants: (props?: ({
     align?: "center" | "left" | "right" | "justify" | null | undefined;
-    variant?: "h5" | "h2" | "h3" | "caption" | "h1" | "h4" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "body3" | "subtitle3" | null | undefined;
-    color?: "default" | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950" | null | undefined;
+    variant?: TextVariant | null | undefined;
+    color?: TextColor | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "body1" | "body2" | "body3" | "caption";
-type TypographyColor = "default" | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950";
+type TypographyVariant = TextVariant;
+type TypographyColor = TextColor;
 type TypographyAlign = "left" | "center" | "right" | "justify";
 type TypographyProps<T extends React.ElementType = "p"> = {
     as?: T;

package/Typography/Typography.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_slot_1 = require("@radix-ui/react-slot");
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
+const typography_types_1 = require("../lib/typography-types");
 const typographyVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
         align: {
@@ -14,96 +15,8 @@ const typographyVariants = (0, class_variance_authority_1.cva)("", {
             right: "text-right",
             justify: "text-justify",
         },
-        variant: {
-            h1: "font-extrabold text-[64px] leading-none tracking-normal font-sans",
-            h2: "font-bold text-[48px] leading-none tracking-normal font-sans",
-            h3: "font-bold text-[32px] leading-none tracking-normal font-sans",
-            h4: "font-bold text-[24px] leading-[1.2] tracking-[-0.48px] font-sans",
-            h5: "font-bold text-[20px] leading-none tracking-normal font-sans",
-            h6: "font-semibold text-[20px] leading-none tracking-normal font-sans",
-            subtitle1: "font-semibold text-[20px] leading-none tracking-normal font-sans",
-            subtitle2: "font-semibold text-[18px] leading-none tracking-normal font-sans",
-            subtitle3: "font-semibold text-[16px] leading-none tracking-normal font-sans",
-            body1: "font-normal text-[16px] leading-none tracking-normal font-sans",
-            body2: "font-normal text-[14px] leading-none tracking-normal font-sans",
-            body3: "font-normal text-[12px] leading-none tracking-normal font-sans",
-            caption: "font-light text-[12px] leading-none tracking-normal font-sans",
-        },
-        color: {
-            default: "text-foreground",
-            // Main colors
-            "main-50": "text-main-50",
-            "main-100": "text-main-100",
-            "main-200": "text-main-200",
-            "main-300": "text-main-300",
-            "main-400": "text-main-400",
-            "main-500": "text-main-500",
-            "main-600": "text-main-600",
-            "main-700": "text-main-700",
-            "main-800": "text-main-800",
-            "main-900": "text-main-900",
-            "main-950": "text-main-950",
-            // Success colors
-            "success-50": "text-success-50",
-            "success-100": "text-success-100",
-            "success-200": "text-success-200",
-            "success-300": "text-success-300",
-            "success-400": "text-success-400",
-            "success-500": "text-success-500",
-            "success-600": "text-success-600",
-            "success-700": "text-success-700",
-            "success-800": "text-success-800",
-            "success-900": "text-success-900",
-            "success-950": "text-success-950",
-            // Accent colors
-            "accent-50": "text-accent-50",
-            "accent-100": "text-accent-100",
-            "accent-200": "text-accent-200",
-            "accent-300": "text-accent-300",
-            "accent-400": "text-accent-400",
-            "accent-500": "text-accent-500",
-            "accent-600": "text-accent-600",
-            "accent-700": "text-accent-700",
-            "accent-800": "text-accent-800",
-            "accent-900": "text-accent-900",
-            "accent-950": "text-accent-950",
-            // Error colors
-            "error-50": "text-error-50",
-            "error-100": "text-error-100",
-            "error-200": "text-error-200",
-            "error-300": "text-error-300",
-            "error-400": "text-error-400",
-            "error-500": "text-error-500",
-            "error-600": "text-error-600",
-            "error-700": "text-error-700",
-            "error-800": "text-error-800",
-            "error-900": "text-error-900",
-            "error-950": "text-error-950",
-            // Warning colors
-            "warning-50": "text-warning-50",
-            "warning-100": "text-warning-100",
-            "warning-200": "text-warning-200",
-            "warning-300": "text-warning-300",
-            "warning-400": "text-warning-400",
-            "warning-500": "text-warning-500",
-            "warning-600": "text-warning-600",
-            "warning-700": "text-warning-700",
-            "warning-800": "text-warning-800",
-            "warning-900": "text-warning-900",
-            "warning-950": "text-warning-950",
-            // Grey colors
-            "grey-50": "text-grey-50",
-            "grey-100": "text-grey-100",
-            "grey-200": "text-grey-200",
-            "grey-300": "text-grey-300",
-            "grey-400": "text-grey-400",
-            "grey-500": "text-grey-500",
-            "grey-600": "text-grey-600",
-            "grey-700": "text-grey-700",
-            "grey-800": "text-grey-800",
-            "grey-900": "text-grey-900",
-            "grey-950": "text-grey-950",
-        },
+        variant: typography_types_1.textVariantClasses,
+        color: typography_types_1.textColorClasses,
     },
     defaultVariants: {
         variant: "body1",

package/index.d.ts

@@ -17,13 +17,14 @@ export { Flex, flexVariants, type FlexProps, type FlexDirection, type FlexAlign,
 export { IconButton, iconButtonVariants, type IconButtonProps, type IconButtonVariant, type IconButtonSize, type IconButtonRoundness } from "./IconButton/IconButton";
 export { Input, inputVariants, type InputProps, type InputSize, type InputRoundness, type InputVariant } from "./Input/Input";
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, inputOTPVariants, inputOTPSlotVariants, type InputOTPProps, type InputOTPSlotProps, type InputOTPSlotSize, } from "./InputOTP/InputOTP";
-export { Label, labelVariants, type LabelProps, type LabelVariant } from "./Label/Label";
+export { Label, labelVariants, type LabelProps } from "./Label/Label";
 export { Loader, loaderVariants, type LoaderProps, type LoaderSize, type LoaderColor } from "./Loader/Loader";
 export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from "./Menubar/Menubar";
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./Popover/Popover";
 export { Progress, progressVariants, progressIndicatorVariants, type ProgressProps, type ProgressSize, type ProgressVariant } from "./Progress/Progress";
 export { RadioGroup, RadioGroupItem, radioGroupItemVariants, type RadioGroupItemProps, type RadioGroupItemSize } from "./RadioGroup/RadioGroup";
 export { ScrollArea, ScrollBar } from "./ScrollArea/ScrollArea";
+export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarMenuItem, SidebarSubMenuItem, SidebarSeparator, SidebarToggle, useSidebar, sidebarMenuItemVariants, sidebarSubMenuItemVariants, type SidebarProps, type SidebarHeaderProps, type SidebarContentProps, type SidebarFooterProps, type SidebarGroupProps, type SidebarGroupLabelProps, type SidebarMenuItemProps, type SidebarSubMenuItemProps, type SidebarSeparatorProps, type SidebarToggleProps, } from "./Sidebar/Sidebar";
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, selectTriggerVariants, type SelectTriggerProps, type SelectTriggerSize, } from "./Select/Select";
 export { Separator } from "./Separator/Separator";
 export { Skeleton, type SkeletonProps } from "./Skeleton/Skeleton";

package/index.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialogOverlay = exports.AlertDialogPortal = exports.AlertDialog = exports.checkboxVariants = exports.Checkbox = exports.bubbleContentVariants = exports.chatBubbleVariants = exports.ChatBubble = exports.useCarousel = exports.carouselItemVariants = exports.carouselContentVariants = exports.carouselVariants = exports.CarouselNext = exports.CarouselPrevious = exports.CarouselItem = exports.CarouselContent = exports.Carousel = exports.cardVariants = exports.CardContent = exports.CardDescription = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = exports.CalendarDayButton = exports.Calendar = exports.buttonVariants = exports.Button = exports.BreadcrumbEllipsis = exports.BreadcrumbSeparator = exports.BreadcrumbPage = exports.BreadcrumbLink = exports.BreadcrumbItem = exports.BreadcrumbList = exports.Breadcrumb = exports.badgeVariants = exports.Badge = exports.avatarVariants = exports.AvatarFallback = exports.AvatarImage = exports.Avatar = exports.alertVariants = exports.AlertDescription = exports.AlertTitle = exports.Alert = void 0;
 exports.labelVariants = exports.Label = exports.inputOTPSlotVariants = exports.inputOTPVariants = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.inputVariants = exports.Input = exports.iconButtonVariants = exports.IconButton = exports.flexVariants = exports.Flex = exports.ErrorMessage = exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = exports.drawerOverlayVariants = exports.drawerContentVariants = exports.DrawerDescription = exports.DrawerTitle = exports.DrawerBody = exports.DrawerFooter = exports.DrawerHeader = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.DrawerOverlay = exports.DrawerPortal = exports.Drawer = exports.alertDialogFooterVariants = exports.alertDialogHeaderVariants = exports.alertDialogContentVariants = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogBody = exports.AlertDialogDescription = void 0;
-exports.TabsTrigger = exports.TabsList = exports.Tabs = exports.switchVariants = exports.Switch = exports.spinnerVariants = exports.Spinner = exports.Skeleton = exports.Separator = exports.selectTriggerVariants = exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSeparator = exports.SelectItem = exports.SelectLabel = exports.SelectContent = exports.SelectTrigger = exports.SelectValue = exports.SelectGroup = exports.Select = exports.ScrollBar = exports.ScrollArea = exports.radioGroupItemVariants = exports.RadioGroupItem = exports.RadioGroup = exports.progressIndicatorVariants = exports.progressVariants = exports.Progress = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.MenubarSubContent = exports.MenubarSubTrigger = exports.MenubarSub = exports.MenubarRadioItem = exports.MenubarRadioGroup = exports.MenubarCheckboxItem = exports.MenubarShortcut = exports.MenubarItem = exports.MenubarLabel = exports.MenubarSeparator = exports.MenubarGroup = exports.MenubarContent = exports.MenubarTrigger = exports.MenubarMenu = exports.MenubarPortal = exports.Menubar = exports.loaderVariants = exports.Loader = void 0;
-exports.copyToClipboard = exports.cn = exports.typographyVariants = exports.Typography = exports.tooltipContentVariants = exports.TooltipProvider = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.toast = exports.Toaster = exports.textareaVariants = exports.Textarea = exports.tabsListVariants = exports.TabsContent = void 0;
+exports.SelectItem = exports.SelectLabel = exports.SelectContent = exports.SelectTrigger = exports.SelectValue = exports.SelectGroup = exports.Select = exports.sidebarSubMenuItemVariants = exports.sidebarMenuItemVariants = exports.useSidebar = exports.SidebarToggle = exports.SidebarSeparator = exports.SidebarSubMenuItem = exports.SidebarMenuItem = exports.SidebarGroupLabel = exports.SidebarGroup = exports.SidebarFooter = exports.SidebarContent = exports.SidebarHeader = exports.Sidebar = exports.ScrollBar = exports.ScrollArea = exports.radioGroupItemVariants = exports.RadioGroupItem = exports.RadioGroup = exports.progressIndicatorVariants = exports.progressVariants = exports.Progress = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.MenubarSubContent = exports.MenubarSubTrigger = exports.MenubarSub = exports.MenubarRadioItem = exports.MenubarRadioGroup = exports.MenubarCheckboxItem = exports.MenubarShortcut = exports.MenubarItem = exports.MenubarLabel = exports.MenubarSeparator = exports.MenubarGroup = exports.MenubarContent = exports.MenubarTrigger = exports.MenubarMenu = exports.MenubarPortal = exports.Menubar = exports.loaderVariants = exports.Loader = void 0;
+exports.copyToClipboard = exports.cn = exports.typographyVariants = exports.Typography = exports.tooltipContentVariants = exports.TooltipProvider = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.toast = exports.Toaster = exports.textareaVariants = exports.Textarea = exports.tabsListVariants = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.Tabs = exports.switchVariants = exports.Switch = exports.spinnerVariants = exports.Spinner = exports.Skeleton = exports.Separator = exports.selectTriggerVariants = exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSeparator = void 0;
 // Styles
 require("./index.css");
 // Components
@@ -162,6 +162,20 @@ Object.defineProperty(exports, "radioGroupItemVariants", { enumerable: true, get
 var ScrollArea_1 = require("./ScrollArea/ScrollArea");
 Object.defineProperty(exports, "ScrollArea", { enumerable: true, get: function () { return ScrollArea_1.ScrollArea; } });
 Object.defineProperty(exports, "ScrollBar", { enumerable: true, get: function () { return ScrollArea_1.ScrollBar; } });
+var Sidebar_1 = require("./Sidebar/Sidebar");
+Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return Sidebar_1.Sidebar; } });
+Object.defineProperty(exports, "SidebarHeader", { enumerable: true, get: function () { return Sidebar_1.SidebarHeader; } });
+Object.defineProperty(exports, "SidebarContent", { enumerable: true, get: function () { return Sidebar_1.SidebarContent; } });
+Object.defineProperty(exports, "SidebarFooter", { enumerable: true, get: function () { return Sidebar_1.SidebarFooter; } });
+Object.defineProperty(exports, "SidebarGroup", { enumerable: true, get: function () { return Sidebar_1.SidebarGroup; } });
+Object.defineProperty(exports, "SidebarGroupLabel", { enumerable: true, get: function () { return Sidebar_1.SidebarGroupLabel; } });
+Object.defineProperty(exports, "SidebarMenuItem", { enumerable: true, get: function () { return Sidebar_1.SidebarMenuItem; } });
+Object.defineProperty(exports, "SidebarSubMenuItem", { enumerable: true, get: function () { return Sidebar_1.SidebarSubMenuItem; } });
+Object.defineProperty(exports, "SidebarSeparator", { enumerable: true, get: function () { return Sidebar_1.SidebarSeparator; } });
+Object.defineProperty(exports, "SidebarToggle", { enumerable: true, get: function () { return Sidebar_1.SidebarToggle; } });
+Object.defineProperty(exports, "useSidebar", { enumerable: true, get: function () { return Sidebar_1.useSidebar; } });
+Object.defineProperty(exports, "sidebarMenuItemVariants", { enumerable: true, get: function () { return Sidebar_1.sidebarMenuItemVariants; } });
+Object.defineProperty(exports, "sidebarSubMenuItemVariants", { enumerable: true, get: function () { return Sidebar_1.sidebarSubMenuItemVariants; } });
 var Select_1 = require("./Select/Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
 Object.defineProperty(exports, "SelectGroup", { enumerable: true, get: function () { return Select_1.SelectGroup; } });

package/lib/typography-types.d.ts

@@ -0,0 +1,4 @@
+export type TextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "body1" | "body2" | "body3" | "caption";
+export type TextColor = "default" | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950";
+export declare const textVariantClasses: Record<TextVariant, string>;
+export declare const textColorClasses: Record<TextColor, string>;

package/lib/typography-types.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textColorClasses = exports.textVariantClasses = void 0;
+exports.textVariantClasses = {
+    h1: "font-extrabold text-[64px] leading-none tracking-normal font-sans",
+    h2: "font-bold text-[48px] leading-none tracking-normal font-sans",
+    h3: "font-bold text-[32px] leading-none tracking-normal font-sans",
+    h4: "font-bold text-[24px] leading-[1.2] tracking-[-0.48px] font-sans",
+    h5: "font-bold text-[20px] leading-none tracking-normal font-sans",
+    h6: "font-semibold text-[20px] leading-none tracking-normal font-sans",
+    subtitle1: "font-semibold text-[20px] leading-none tracking-normal font-sans",
+    subtitle2: "font-semibold text-[18px] leading-none tracking-normal font-sans",
+    subtitle3: "font-semibold text-[16px] leading-none tracking-normal font-sans",
+    body1: "font-normal text-[16px] leading-none tracking-normal font-sans",
+    body2: "font-normal text-[14px] leading-none tracking-normal font-sans",
+    body3: "font-normal text-[12px] leading-none tracking-normal font-sans",
+    caption: "font-light text-[12px] leading-none tracking-normal font-sans",
+};
+exports.textColorClasses = {
+    default: "text-foreground",
+    // Main colors
+    "main-50": "text-main-50",
+    "main-100": "text-main-100",
+    "main-200": "text-main-200",
+    "main-300": "text-main-300",
+    "main-400": "text-main-400",
+    "main-500": "text-main-500",
+    "main-600": "text-main-600",
+    "main-700": "text-main-700",
+    "main-800": "text-main-800",
+    "main-900": "text-main-900",
+    "main-950": "text-main-950",
+    // Success colors
+    "success-50": "text-success-50",
+    "success-100": "text-success-100",
+    "success-200": "text-success-200",
+    "success-300": "text-success-300",
+    "success-400": "text-success-400",
+    "success-500": "text-success-500",
+    "success-600": "text-success-600",
+    "success-700": "text-success-700",
+    "success-800": "text-success-800",
+    "success-900": "text-success-900",
+    "success-950": "text-success-950",
+    // Accent colors
+    "accent-50": "text-accent-50",
+    "accent-100": "text-accent-100",
+    "accent-200": "text-accent-200",
+    "accent-300": "text-accent-300",
+    "accent-400": "text-accent-400",
+    "accent-500": "text-accent-500",
+    "accent-600": "text-accent-600",
+    "accent-700": "text-accent-700",
+    "accent-800": "text-accent-800",
+    "accent-900": "text-accent-900",
+    "accent-950": "text-accent-950",
+    // Error colors
+    "error-50": "text-error-50",
+    "error-100": "text-error-100",
+    "error-200": "text-error-200",
+    "error-300": "text-error-300",
+    "error-400": "text-error-400",
+    "error-500": "text-error-500",
+    "error-600": "text-error-600",
+    "error-700": "text-error-700",
+    "error-800": "text-error-800",
+    "error-900": "text-error-900",
+    "error-950": "text-error-950",
+    // Warning colors
+    "warning-50": "text-warning-50",
+    "warning-100": "text-warning-100",
+    "warning-200": "text-warning-200",
+    "warning-300": "text-warning-300",
+    "warning-400": "text-warning-400",
+    "warning-500": "text-warning-500",
+    "warning-600": "text-warning-600",
+    "warning-700": "text-warning-700",
+    "warning-800": "text-warning-800",
+    "warning-900": "text-warning-900",
+    "warning-950": "text-warning-950",
+    // Grey colors
+    "grey-50": "text-grey-50",
+    "grey-100": "text-grey-100",
+    "grey-200": "text-grey-200",
+    "grey-300": "text-grey-300",
+    "grey-400": "text-grey-400",
+    "grey-500": "text-grey-500",
+    "grey-600": "text-grey-600",
+    "grey-700": "text-grey-700",
+    "grey-800": "text-grey-800",
+    "grey-900": "text-grey-900",
+    "grey-950": "text-grey-950",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2v2ai/uikit",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "author": "Arulraj V & abofficial1997@gmail.com",
   "description": "A React UI component library built with shadcn/ui and Tailwind CSS",
   "license": "MIT",