@c15t/react 0.0.1-rc.10

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

@@ -0,0 +1,444 @@
+import { type ButtonHTMLAttributes, type ElementType } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import type { PolymorphicComponentProps } from '../../libs/polymorphic';
+/**
+ * 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 | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    root: (string | undefined)[];
+    icon: (string | undefined)[];
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}>, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    root: (string | undefined)[];
+    icon: (string | undefined)[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    root: (string | undefined)[];
+    icon: (string | undefined)[];
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}>, 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 | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    root: (string | undefined)[];
+    icon: (string | undefined)[];
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}>, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    root: (string | undefined)[];
+    icon: (string | undefined)[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    root: (string | undefined)[];
+    icon: (string | undefined)[];
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}, {
+    variant: {
+        primary: {};
+        neutral: {};
+    };
+    mode: {
+        filled: {};
+        stroke: {};
+        lighter: {};
+        ghost: {};
+    };
+    size: {
+        medium: {
+            root: string | undefined;
+        };
+        small: {
+            root: string | undefined;
+        };
+        xsmall: {
+            root: string | undefined;
+        };
+        xxsmall: {
+            root: string | undefined;
+        };
+    };
+}>, 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/components/shared/ui/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/ui/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAIhB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,YAAY,EAAM,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAWxE;;;;;;;;;;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/components/shared/ui/button/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_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_variants_6759ef11__ from "tailwind-variants";
+import * as __WEBPACK_EXTERNAL_MODULE__libs_recursive_clone_children_js_484e82e8__ from "../../libs/recursive-clone-children.js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__ from "./button.module.js";
+const BUTTON_ROOT_NAME = 'ButtonRoot';
+const BUTTON_ICON_NAME = 'ButtonIcon';
+const buttonVariants = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_variants_6759ef11__.tv)({
+    slots: {
+        root: [
+            __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"].button
+        ],
+        icon: [
+            __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-icon"]
+        ]
+    },
+    variants: {
+        variant: {
+            primary: {},
+            neutral: {}
+        },
+        mode: {
+            filled: {},
+            stroke: {},
+            lighter: {},
+            ghost: {}
+        },
+        size: {
+            medium: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-medium"]
+            },
+            small: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-small"]
+            },
+            xsmall: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-xsmall"]
+            },
+            xxsmall: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-xxsmall"]
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'primary',
+            mode: 'filled',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-primary-filled"]
+            }
+        },
+        {
+            variant: 'primary',
+            mode: 'stroke',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-primary-stroke"]
+            }
+        },
+        {
+            variant: 'primary',
+            mode: 'lighter',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-primary-lighter"]
+            }
+        },
+        {
+            variant: 'primary',
+            mode: 'ghost',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-primary-ghost"]
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'filled',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-neutral-filled"]
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'stroke',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-neutral-stroke"]
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'lighter',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["button-neutral-lighter"]
+            }
+        },
+        {
+            variant: 'neutral',
+            mode: 'ghost',
+            class: {
+                root: __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__["default"]["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_484e82e8__.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/components/shared/ui/button/button.module.cjs

@@ -0,0 +1,65 @@
+"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__, {
+    default: ()=>button_module_rslib_entry_
+});
+require("./button_module.css");
+const button_module_rslib_entry_ = {
+    button: "c15t-button-YKOgW",
+    "button-medium": "c15t-button-medium-1Mfpj",
+    buttonMedium: "c15t-button-medium-1Mfpj",
+    "button-small": "c15t-button-small-n5LJg",
+    buttonSmall: "c15t-button-small-n5LJg",
+    "button-xsmall": "c15t-button-xsmall-ygCjx",
+    buttonXsmall: "c15t-button-xsmall-ygCjx",
+    "button-xxsmall": "c15t-button-xxsmall-r7ZLO",
+    buttonXxsmall: "c15t-button-xxsmall-r7ZLO",
+    "button-primary-filled": "c15t-button-primary-filled-YzeKk",
+    buttonPrimaryFilled: "c15t-button-primary-filled-YzeKk",
+    "button-primary-stroke": "c15t-button-primary-stroke-TWzjH",
+    buttonPrimaryStroke: "c15t-button-primary-stroke-TWzjH",
+    "button-primary-lighter": "c15t-button-primary-lighter-kAHLT",
+    buttonPrimaryLighter: "c15t-button-primary-lighter-kAHLT",
+    "button-primary-ghost": "c15t-button-primary-ghost-j0CcU",
+    buttonPrimaryGhost: "c15t-button-primary-ghost-j0CcU",
+    "button-neutral-filled": "c15t-button-neutral-filled-uvvkN",
+    buttonNeutralFilled: "c15t-button-neutral-filled-uvvkN",
+    "button-neutral-stroke": "c15t-button-neutral-stroke-EAzCC",
+    buttonNeutralStroke: "c15t-button-neutral-stroke-EAzCC",
+    "button-neutral-lighter": "c15t-button-neutral-lighter-ANBJI",
+    buttonNeutralLighter: "c15t-button-neutral-lighter-ANBJI",
+    "button-neutral-ghost": "c15t-button-neutral-ghost-x4zTl",
+    buttonNeutralGhost: "c15t-button-neutral-ghost-x4zTl",
+    "button-icon": "c15t-button-icon-ps6Fy",
+    buttonIcon: "c15t-button-icon-ps6Fy"
+};
+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
+});

package/dist/components/shared/ui/button/button.module.js

@@ -0,0 +1,31 @@
+import "./button_module.css";
+const button_module_rslib_entry_ = {
+    button: "c15t-button-YKOgW",
+    "button-medium": "c15t-button-medium-1Mfpj",
+    buttonMedium: "c15t-button-medium-1Mfpj",
+    "button-small": "c15t-button-small-n5LJg",
+    buttonSmall: "c15t-button-small-n5LJg",
+    "button-xsmall": "c15t-button-xsmall-ygCjx",
+    buttonXsmall: "c15t-button-xsmall-ygCjx",
+    "button-xxsmall": "c15t-button-xxsmall-r7ZLO",
+    buttonXxsmall: "c15t-button-xxsmall-r7ZLO",
+    "button-primary-filled": "c15t-button-primary-filled-YzeKk",
+    buttonPrimaryFilled: "c15t-button-primary-filled-YzeKk",
+    "button-primary-stroke": "c15t-button-primary-stroke-TWzjH",
+    buttonPrimaryStroke: "c15t-button-primary-stroke-TWzjH",
+    "button-primary-lighter": "c15t-button-primary-lighter-kAHLT",
+    buttonPrimaryLighter: "c15t-button-primary-lighter-kAHLT",
+    "button-primary-ghost": "c15t-button-primary-ghost-j0CcU",
+    buttonPrimaryGhost: "c15t-button-primary-ghost-j0CcU",
+    "button-neutral-filled": "c15t-button-neutral-filled-uvvkN",
+    buttonNeutralFilled: "c15t-button-neutral-filled-uvvkN",
+    "button-neutral-stroke": "c15t-button-neutral-stroke-EAzCC",
+    buttonNeutralStroke: "c15t-button-neutral-stroke-EAzCC",
+    "button-neutral-lighter": "c15t-button-neutral-lighter-ANBJI",
+    buttonNeutralLighter: "c15t-button-neutral-lighter-ANBJI",
+    "button-neutral-ghost": "c15t-button-neutral-ghost-x4zTl",
+    buttonNeutralGhost: "c15t-button-neutral-ghost-x4zTl",
+    "button-icon": "c15t-button-icon-ps6Fy",
+    buttonIcon: "c15t-button-icon-ps6Fy"
+};
+export { button_module_rslib_entry_ as default };