@c15t/react 0.0.1-rc.3

package/dist/ui/components/button.d.ts

@@ -0,0 +1,445 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { PolymorphicComponentProps } from '../libs/polymorphic';
+import './button.css';
+import { type ButtonHTMLAttributes, type ElementType } from 'react';
+/**
+ * Button component variant styles using tailwind-variants
+ * @remarks
+ * Defines the core styling variants for the Button component including:
+ * - Base styles for the button and icon
+ * - Variant styles (primary, neutral, error)
+ * - Mode styles (filled, stroke, lighter, ghost)
+ * - Size variants (medium, small, xsmall, xxsmall)
+ *
+ * @internal
+ */
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    icon: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}>, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    icon: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    icon: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Type definitions for button props
+ * @internal
+ */
+export type ButtonSharedProps = VariantProps<typeof buttonVariants>;
+/**
+ * The root component for the Button compound component
+ *
+ * @remarks
+ * ButtonRoot is the main container component that provides the core button functionality.
+ * It supports various style variants, modes, and sizes through the buttonVariants configuration.
+ *
+ * @example
+ * ```tsx
+ * <ButtonRoot variant="primary" mode="filled" size="medium">
+ *   <ButtonIcon as={IconComponent} />
+ *   Click me
+ * </ButtonRoot>
+ * ```
+ *
+ * @param props - Component props including variant styles, mode, size, and standard button attributes
+ * @param ref - Forward ref to access the underlying button element
+ *
+ * @public
+ */
+declare const ButtonRoot: import("react").ForwardRefExoticComponent<VariantProps<import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    icon: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}>, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    icon: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    icon: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string;
+        };
+        small: {
+            root: string;
+        };
+        xsmall: {
+            root: string;
+        };
+        xxsmall: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>> & ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * When true, the component will render its children directly without wrapping them in a button element
+     */
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * The icon component for the Button compound component
+ *
+ * @remarks
+ * ButtonIcon is a polymorphic component that can render any icon component while maintaining
+ * consistent styling with the parent button. It inherits variant properties from ButtonRoot.
+ *
+ * @example
+ * ```tsx
+ * <ButtonRoot>
+ *   <ButtonIcon as={MyIcon} />
+ *   Button with Icon
+ * </ButtonRoot>
+ * ```
+ *
+ * @typeParam T - The element type to render the icon as
+ * @param props - Component props including the polymorphic 'as' prop and shared button variant props
+ *
+ * @public
+ */
+declare function ButtonIcon<T extends ElementType>({ variant, mode, size, as, className, ...rest }: PolymorphicComponentProps<T, ButtonSharedProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace ButtonIcon {
+    var displayName: string;
+}
+/**
+ * Export the compound components
+ * @public
+ */
+export { ButtonRoot as Root, ButtonIcon as Icon };
+//# sourceMappingURL=button.d.ts.map

package/dist/ui/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/components/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAM,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,cAAc,CAAC;AACtB,OAAO,EACN,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAIhB,MAAM,OAAO,CAAC;AAQf;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyEzB,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAcpE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA1Bd;;OAEG;cACO,OAAO;qDAwDlB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAC1C,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,EACT,GAAG,IAAI,EACP,EAAE,yBAAyB,CAAC,CAAC,EAAE,iBAAiB,CAAC,2CAKjD;kBAZQ,UAAU;;;AAenB;;;GAGG;AACH,OAAO,EAAE,UAAU,IAAI,IAAI,EAAE,UAAU,IAAI,IAAI,EAAE,CAAC"}

package/dist/ui/components/button.js

@@ -0,0 +1,149 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__radix_ui_react_slot_85c2da36__ from "@radix-ui/react-slot";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_variants_6759ef11__ from "tailwind-variants";
+import * as __WEBPACK_EXTERNAL_MODULE__libs_recursive_clone_children_js_67617b1b__ from "../libs/recursive-clone-children.js";
+import "./button.css";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const BUTTON_ROOT_NAME = 'ButtonRoot';
+const BUTTON_ICON_NAME = 'ButtonIcon';
+const buttonVariants = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_variants_6759ef11__.tv)({
+    slots: {
+        root: [
+            'c15t-button'
+        ],
+        icon: [
+            'c15t-button-icon'
+        ]
+    },
+    variants: {
+        variant: {
+            primary: {},
+            neutral: {}
+        },
+        mode: {
+            filled: {},
+            stroke: {},
+            lighter: {},
+            ghost: {}
+        },
+        size: {
+            medium: {
+                root: 'c15t-button-medium'
+            },
+            small: {
+                root: 'c15t-button-small'
+            },
+            xsmall: {
+                root: 'c15t-button-xsmall'
+            },
+            xxsmall: {
+                root: 'c15t-button-xxsmall'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'primary',
+            mode: 'filled',
+            class: {
+                root: 'c15t-button-primary-filled'
+            }
+        },
+        {
+            variant: 'primary',
+            mode: 'stroke',
+            class: {
+                root: 'c15t-button-primary-stroke'
+            }
+        },
+        {
+            variant: 'primary',
+            mode: 'lighter',
+            class: {
+                root: 'c15t-button-primary-lighter'
+            }
+        },
+        {
+            variant: 'primary',
+            mode: 'ghost',
+            class: {
+                root: 'c15t-button-primary-ghost'
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'filled',
+            class: {
+                root: 'c15t-button-neutral-filled'
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'stroke',
+            class: {
+                root: 'c15t-button-neutral-stroke'
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'lighter',
+            class: {
+                root: 'c15t-button-neutral-lighter'
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'ghost',
+            class: {
+                root: 'c15t-button-neutral-ghost'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'primary',
+        mode: 'filled',
+        size: 'medium'
+    }
+});
+const ButtonRoot = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ children, variant, mode, size, asChild, className, ...rest }, forwardedRef)=>{
+    const uniqueId = (0, __WEBPACK_EXTERNAL_MODULE_react__.useId)();
+    const Component = asChild ? __WEBPACK_EXTERNAL_MODULE__radix_ui_react_slot_85c2da36__.Slot : 'button';
+    const { root } = buttonVariants({
+        variant,
+        mode,
+        size
+    });
+    const sharedProps = {
+        variant,
+        mode,
+        size
+    };
+    const extendedChildren = (0, __WEBPACK_EXTERNAL_MODULE__libs_recursive_clone_children_js_67617b1b__.recursiveCloneChildren)(children, sharedProps, [
+        BUTTON_ICON_NAME
+    ], uniqueId, asChild);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Component, {
+        ref: forwardedRef,
+        className: root({
+            class: className
+        }),
+        ...rest,
+        children: extendedChildren
+    });
+});
+ButtonRoot.displayName = BUTTON_ROOT_NAME;
+function ButtonIcon({ variant, mode, size, as, className, ...rest }) {
+    const Component = as || 'div';
+    const { icon } = buttonVariants({
+        mode,
+        variant,
+        size
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Component, {
+        className: icon({
+            class: className
+        }),
+        ...rest
+    });
+}
+ButtonIcon.displayName = BUTTON_ICON_NAME;
+export { ButtonIcon as Icon, ButtonRoot as Root, buttonVariants };

package/dist/ui/components/card.cjs

@@ -0,0 +1,80 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    CardHeader: ()=>CardHeader,
+    CardDescription: ()=>CardDescription,
+    CardTitle: ()=>CardTitle,
+    Card: ()=>Card,
+    CardContent: ()=>CardContent,
+    CardFooter: ()=>CardFooter
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const cn_cjs_namespaceObject = require("../libs/cn.cjs");
+require("./card.css");
+const Card = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        className: (0, cn_cjs_namespaceObject.cn)('c15t-card', className),
+        ...props
+    }));
+Card.displayName = 'Card';
+const CardHeader = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        className: (0, cn_cjs_namespaceObject.cn)('c15t-card-header', className),
+        ...props
+    }));
+CardHeader.displayName = 'CardHeader';
+const CardTitle = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+        ref: ref,
+        className: (0, cn_cjs_namespaceObject.cn)('c15t-card-title', className),
+        ...props
+    }));
+CardTitle.displayName = 'CardTitle';
+const CardDescription = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+        ref: ref,
+        className: (0, cn_cjs_namespaceObject.cn)("c15t-card-description", className),
+        ...props
+    }));
+CardDescription.displayName = "CardDescription";
+const CardContent = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        className: (0, cn_cjs_namespaceObject.cn)('c15t-card-content', className),
+        ...props
+    }));
+CardContent.displayName = 'CardContent';
+const CardFooter = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        className: (0, cn_cjs_namespaceObject.cn)('c15t-card-footer', className),
+        ...props
+    }));
+CardFooter.displayName = 'CardFooter';
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});