@c15t/react 0.0.1-rc.3

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

@@ -0,0 +1,45 @@
+import './accordion.css';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { type ComponentPropsWithoutRef, type ElementType, type HTMLAttributes } from 'react';
+import { type AllThemeKeys, type ExtendThemeKeys, type ThemeValue } from '../../theme';
+import type { PolymorphicComponentProps } from '../libs/polymorphic';
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export type AccordionStylesKeys = {
+    'accordion.root'?: ThemeValue;
+    'accordion.item': ThemeValue;
+    'accordion.trigger': ThemeValue;
+    'accordion.icon': ThemeValue;
+    'accordion.arrow.open': ThemeValue;
+    'accordion.arrow.close': ThemeValue;
+    'accordion.content': ThemeValue;
+    'accordion.content-inner': ThemeValue;
+};
+declare const AccordionRoot: import("react").ForwardRefExoticComponent<(ComponentPropsWithoutRef<import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>> & ExtendThemeKeys) & import("react").RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & ExtendThemeKeys & import("react").RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & ExtendThemeKeys & import("react").RefAttributes<HTMLButtonElement>>;
+declare function AccordionIcon<T extends ElementType>({ className, themeKey, baseClassName, noStyle, style, as, ...rest }: PolymorphicComponentProps<T> & ExtendThemeKeys): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionIcon {
+    var displayName: string;
+}
+type AccordionArrowProps = HTMLAttributes<HTMLDivElement> & {
+    openIcon?: {
+        Element: ElementType;
+        themeKey: AllThemeKeys;
+    } & ExtendThemeKeys;
+    closeIcon?: {
+        Element: ElementType;
+        themeKey: AllThemeKeys;
+    } & ExtendThemeKeys;
+};
+declare function AccordionArrow({ openIcon, closeIcon, ...rest }: AccordionArrowProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AccordionArrow {
+    var displayName: string;
+}
+declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    theme: {
+        content: ExtendThemeKeys;
+        contentInner: ExtendThemeKeys;
+    };
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { AccordionRoot as Root, AccordionHeader as Header, AccordionItem as Item, AccordionTrigger as Trigger, AccordionIcon as Icon, AccordionArrow as Arrow, AccordionContent as Content, };
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/ui/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EACN,KAAK,wBAAwB,EAE7B,KAAK,WAAW,EAChB,KAAK,cAAc,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,EACN,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,UAAU,EAGf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AASrE,QAAA,MAAM,eAAe,wIAA4B,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG;IACjC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,gBAAgB,EAAE,UAAU,CAAC;IAC7B,mBAAmB,EAAE,UAAU,CAAC;IAChC,gBAAgB,EAAE,UAAU,CAAC;IAC7B,sBAAsB,EAAE,UAAU,CAAC;IACnC,uBAAuB,EAAE,UAAU,CAAC;IACpC,mBAAmB,EAAE,UAAU,CAAC;IAChC,yBAAyB,EAAE,UAAU,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,aAAa,2TAgClB,CAAC;AAIF,QAAA,MAAM,aAAa,iNAwBlB,CAAC;AAGF,QAAA,MAAM,gBAAgB,0NA8BrB,CAAC;AAGF,iBAAS,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,EAC7C,SAAS,EACT,QAAQ,EACR,aAAa,EACb,OAAO,EACP,KAAK,EACL,EAAE,EACF,GAAG,IAAI,EACP,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,eAAe,2CAWhD;kBAnBQ,aAAa;;;AAsBtB,KAAK,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,QAAQ,EAAE,YAAY,CAAA;KAAE,GAAG,eAAe,CAAC;IAC9E,SAAS,CAAC,EAAE;QACX,OAAO,EAAE,WAAW,CAAC;QACrB,QAAQ,EAAE,YAAY,CAAC;KACvB,GAAG,eAAe,CAAC;CACpB,CAAC;AAGF,iBAAS,cAAc,CAAC,EACvB,QAMC,EACD,SAGC,EACD,GAAG,IAAI,EACP,EAAE,mBAAmB,2CAoBrB;kBAjCQ,cAAc;;;AAoCvB,QAAA,MAAM,gBAAgB;WAGb;QAAE,OAAO,EAAE,eAAe,CAAC;QAAC,YAAY,EAAE,eAAe,CAAA;KAAE;kDAmClE,CAAC;AAGH,OAAO,EACN,aAAa,IAAI,IAAI,EACrB,eAAe,IAAI,MAAM,EACzB,aAAa,IAAI,IAAI,EACrB,gBAAgB,IAAI,OAAO,EAC3B,aAAa,IAAI,IAAI,EACrB,cAAc,IAAI,KAAK,EACvB,gBAAgB,IAAI,OAAO,GAC3B,CAAC"}

package/dist/ui/components/accordion.js

@@ -0,0 +1,164 @@
+'use client';
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import "./accordion.css";
+import * as __WEBPACK_EXTERNAL_MODULE__radix_ui_react_accordion_496f1025__ from "@radix-ui/react-accordion";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__primitives_box_js_62a8881e__ from "../../primitives/box.js";
+import * as __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__ from "../../theme/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_js_b2dcfc37__ from "./icon.js";
+const ACCORDION_ROOT_NAME = 'AccordionRoot';
+const ACCORDION_ITEM_NAME = 'AccordionItem';
+const ACCORDION_ICON_NAME = 'AccordionIcon';
+const ACCORDION_ARROW_NAME = 'AccordionArrow';
+const ACCORDION_TRIGGER_NAME = 'AccordionTrigger';
+const ACCORDION_CONTENT_NAME = 'AccordionContent';
+const AccordionHeader = __WEBPACK_EXTERNAL_MODULE__radix_ui_react_accordion_496f1025__.Header;
+const AccordionRoot = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, themeKey = 'accordion.root', baseClassName, noStyle, style, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useThemeContext)();
+    const accordionStyle = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useStyles)(themeKey, {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion'
+        ],
+        className,
+        noStyle: contextNoStyle || noStyle,
+        style
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_accordion_496f1025__.Root, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionStyle
+    });
+});
+AccordionRoot.displayName = ACCORDION_ROOT_NAME;
+const AccordionItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, themeKey, baseClassName, noStyle, style, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useThemeContext)();
+    const accordionItemStyle = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useStyles)(themeKey ?? 'accordion.item', {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion-item'
+        ],
+        className,
+        noStyle: contextNoStyle || noStyle,
+        style
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_accordion_496f1025__.Item, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionItemStyle
+    });
+});
+AccordionItem.displayName = ACCORDION_ITEM_NAME;
+const AccordionTrigger = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ children, className, themeKey, baseClassName, noStyle, style, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useThemeContext)();
+    const accordionTriggerStyle = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useStyles)(themeKey ?? 'accordion.trigger-inner', {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion-trigger-inner'
+        ],
+        className,
+        noStyle: contextNoStyle || noStyle,
+        style
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_accordion_496f1025__.Trigger, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionTriggerStyle,
+        children: children
+    });
+});
+AccordionTrigger.displayName = ACCORDION_TRIGGER_NAME;
+function AccordionIcon({ className, themeKey, baseClassName, noStyle, style, as, ...rest }) {
+    const accordionIconStyle = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useStyles)(themeKey ?? 'accordion.icon', {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion-icon'
+        ],
+        className,
+        noStyle,
+        style
+    });
+    const Component = as || 'div';
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Component, {
+        ...rest,
+        ...accordionIconStyle
+    });
+}
+AccordionIcon.displayName = ACCORDION_ICON_NAME;
+function AccordionArrow({ openIcon = {
+    Element: (0, __WEBPACK_EXTERNAL_MODULE__icon_js_b2dcfc37__.LucideIcon)({
+        title: 'Open',
+        iconPath: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+            d: "M5 12h14M12 5v14"
+        })
+    }),
+    themeKey: 'accordion.arrow.open'
+}, closeIcon = {
+    Element: (0, __WEBPACK_EXTERNAL_MODULE__icon_js_b2dcfc37__.LucideIcon)({
+        title: 'Close',
+        iconPath: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+            d: "M5 12h14"
+        })
+    }),
+    themeKey: 'accordion.arrow.close'
+}, ...rest }) {
+    const accordionArrowOpenStyle = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useStyles)(openIcon.themeKey, {
+        baseClassName: [
+            openIcon.baseClassName,
+            'c15t-accordion-arrow-open'
+        ],
+        className: openIcon.className,
+        noStyle: openIcon.noStyle,
+        style: openIcon.style
+    });
+    const accordionArrowClosedStyle = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useStyles)(closeIcon.themeKey, {
+        baseClassName: [
+            closeIcon.baseClassName,
+            'c15t-accordion-arrow-close'
+        ],
+        className: closeIcon.className,
+        noStyle: closeIcon.noStyle,
+        style: closeIcon.style
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(openIcon.Element, {
+                ...rest,
+                ...accordionArrowOpenStyle
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(closeIcon.Element, {
+                ...rest,
+                ...accordionArrowClosedStyle
+            })
+        ]
+    });
+}
+AccordionArrow.displayName = ACCORDION_ARROW_NAME;
+const AccordionContent = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ children, className, theme, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useThemeContext)();
+    const accordionContentStyle = (0, __WEBPACK_EXTERNAL_MODULE__theme_index_js_1910c06e__.useStyles)(theme?.content?.themeKey ?? 'accordion.content', {
+        baseClassName: [
+            theme?.content?.baseClassName,
+            'c15t-accordion-content'
+        ],
+        className,
+        noStyle: theme?.content?.noStyle || contextNoStyle,
+        style: theme?.content?.style
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_accordion_496f1025__.Content, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionContentStyle,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__primitives_box_js_62a8881e__.Box, {
+            ...theme?.contentInner,
+            baseClassName: [
+                theme?.content?.baseClassName,
+                'c15t-accordion-content-inner'
+            ],
+            themeKey: theme?.contentInner?.themeKey ?? 'accordion.content-inner',
+            children: children
+        })
+    });
+});
+AccordionContent.displayName = ACCORDION_CONTENT_NAME;
+export { AccordionArrow as Arrow, AccordionContent as Content, AccordionHeader as Header, AccordionIcon as Icon, AccordionItem as Item, AccordionRoot as Root, AccordionTrigger as Trigger };

package/dist/ui/components/button.cjs

@@ -0,0 +1,185 @@
+"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__, {
+    Root: ()=>ButtonRoot,
+    buttonVariants: ()=>buttonVariants,
+    Icon: ()=>ButtonIcon
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_slot_namespaceObject = require("@radix-ui/react-slot");
+const external_tailwind_variants_namespaceObject = require("tailwind-variants");
+const recursive_clone_children_cjs_namespaceObject = require("../libs/recursive-clone-children.cjs");
+require("./button.css");
+const external_react_namespaceObject = require("react");
+const BUTTON_ROOT_NAME = 'ButtonRoot';
+const BUTTON_ICON_NAME = 'ButtonIcon';
+const buttonVariants = (0, external_tailwind_variants_namespaceObject.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, external_react_namespaceObject.forwardRef)(({ children, variant, mode, size, asChild, className, ...rest }, forwardedRef)=>{
+    const uniqueId = (0, external_react_namespaceObject.useId)();
+    const Component = asChild ? react_slot_namespaceObject.Slot : 'button';
+    const { root } = buttonVariants({
+        variant,
+        mode,
+        size
+    });
+    const sharedProps = {
+        variant,
+        mode,
+        size
+    };
+    const extendedChildren = (0, recursive_clone_children_cjs_namespaceObject.recursiveCloneChildren)(children, sharedProps, [
+        BUTTON_ICON_NAME
+    ], uniqueId, asChild);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(Component, {
+        className: icon({
+            class: className
+        }),
+        ...rest
+    });
+}
+ButtonIcon.displayName = BUTTON_ICON_NAME;
+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/ui/components/button.css

@@ -0,0 +1,303 @@
+.c15t-cookie-banner-root, .c15t-consent-manager-dialog-root, .c15t-consent-manager-widget-root {
+  --button-transition-duration: .2s;
+  --button-transition-ease: cubic-bezier(.4, 0, .2, 1);
+  --button-shadow-primary-focus: 0 0 0 4px #476cff33;
+  --button-shadow-neutral-focus: 0 0 0 4px #17171733;
+  --button-shadow-xs: 0px 1px 2px 0px #0e121b0f;
+  --button-height-medium: 2.5rem;
+  --button-height-small: 2.25rem;
+  --button-height-xsmall: 2rem;
+  --button-height-xxsmall: 1.75rem;
+  --button-gap-large: .75rem;
+  --button-gap-small: .625rem;
+  --button-icon-size: 1.25rem;
+  --button-primary-color: #335cff;
+  --button-primary-dark: #2547d0;
+  --button-primary-alpha-10: #476cff1a;
+  --button-bg-white: #fff;
+  --button-bg-light-gray: #f7f7f7;
+  --button-text-disabled: #d1d1d1;
+  --button-text-subtle: #5c5c5c;
+  --button-text-strong: #171717;
+  --button-static-white: #fff;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+  --button-stroke-soft: #ebebeb;
+}
+
+.dark .c15t-cookie-banner-root, .dark .c15t-consent-manager-dialog-root, .dark .c15t-consent-manager-widget-root {
+  --button-bg-light-gray: #333;
+  --button-text-disabled: #4d4d4d;
+  --button-text-subtle: #b3b3b3;
+  --button-text-strong: #e6e6e6;
+  --button-bg-dark: #1a1a1a;
+  --button-bg-surface: #292929;
+}
+
+.c15t-button, .c15t-button[type="button"], .c15t-button[type="reset"], .c15t-button[type="submit"] {
+  -webkit-appearance: button;
+}
+
+.c15t-button {
+  font: inherit .875rem / 1.25rem 500;
+  white-space: nowrap;
+  transition: all var(--button-transition-duration) var(--button-transition-ease);
+  border: 0;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  display: inline-flex;
+  position: relative;
+}
+
+.c15t-button:disabled {
+  pointer-events: none;
+  background-color: var(--button-bg-light-gray);
+  color: var(--button-text-disabled);
+  box-shadow: none;
+}
+
+.c15t-button:focus {
+  outline: none;
+}
+
+.c15t-button-icon {
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0 -.25rem;
+  display: flex;
+}
+
+.c15t-button-medium, .c15t-button-small, .c15t-button-xsmall, .c15t-button-xxsmall {
+  gap: var(--button-gap-large);
+  border-radius: .5rem;
+}
+
+.c15t-button-medium {
+  height: var(--button-height-medium);
+  padding: 0 .875rem;
+}
+
+.c15t-button-small {
+  height: var(--button-height-small);
+  padding: 0 .75rem;
+}
+
+.c15t-button-xsmall {
+  height: var(--button-height-xsmall);
+  padding: 0 .625rem;
+}
+
+.c15t-button-xxsmall {
+  height: var(--button-height-xxsmall);
+  padding: 0 .5rem;
+}
+
+.c15t-button-primary-filled {
+  background-color: var(--button-primary-color);
+  color: var(--button-static-white);
+}
+
+.c15t-button-primary-filled:hover {
+  background-color: var(--button-primary-dark);
+}
+
+.c15t-button-primary-filled:focus-visible {
+  box-shadow: var(--button-shadow-primary-focus);
+}
+
+.dark .c15t-button-primary-filled {
+  --button-bg-white: #1a1a1a;
+  --button-bg-light-gray: #333;
+  --button-text-disabled: #4d4d4d;
+  --button-text-subtle: #b3b3b3;
+  --button-text-strong: #e6e6e6;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+}
+
+.c15t-button-primary-stroke {
+  background-color: var(--button-bg-white);
+  color: var(--button-primary-color);
+  box-shadow: inset 0 0 0 1px var(--button-primary-color);
+
+  &:hover {
+    background-color: var(--button-primary-alpha-10);
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: var(--button-shadow-primary-focus);
+  }
+}
+
+.dark .c15t-button-primary-stroke {
+  --button-primary-color: #335cff;
+  --button-primary-dark: #2547d0;
+  --button-primary-alpha-10: #476cff1a;
+  --button-bg-white: #1a1a1a;
+  --button-bg-light-gray: #333;
+  --button-text-disabled: #4d4d4d;
+  --button-text-subtle: #b3b3b3;
+  --button-text-strong: #e6e6e6;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+}
+
+.c15t-button-primary-lighter {
+  background-color: var(--button-primary-alpha-10);
+  color: var(--button-primary-color);
+  box-shadow: inset 0 0 0 1px #0000;
+
+  &:hover {
+    background-color: var(--button-bg-white);
+    box-shadow: inset 0 0 0 1px var(--button-primary-color);
+  }
+
+  &:focus-visible {
+    background-color: var(--button-bg-white);
+    box-shadow: var(--button-shadow-primary-focus), inset 0 0 0 1px var(--button-primary-color);
+  }
+}
+
+.dark .c15t-button-primary-lighter {
+  --button-primary-color: #335cff;
+  --button-primary-dark: #2547d0;
+  --button-primary-alpha-10: #476cff1a;
+  --button-bg-white: #1a1a1a;
+  --button-bg-light-gray: #333;
+  --button-text-disabled: #4d4d4d;
+  --button-text-subtle: #b3b3b3;
+  --button-text-strong: #e6e6e6;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+}
+
+.c15t-button-primary-ghost {
+  color: var(--button-primary-color);
+  background-color: #0000;
+  box-shadow: inset 0 0 0 1px #0000;
+
+  &:hover {
+    background-color: var(--button-primary-alpha-10);
+  }
+
+  &:focus-visible {
+    background-color: var(--button-bg-white);
+    box-shadow: var(--button-shadow-primary-focus), inset 0 0 0 1px var(--button-primary-color);
+  }
+}
+
+.dark .c15t-button-primary-ghost {
+  --button-primary-color: #335cff;
+  --button-primary-dark: #2547d0;
+  --button-primary-alpha-10: #476cff1a;
+  --button-bg-white: #1a1a1a;
+  --button-bg-light-gray: #333;
+  --button-text-disabled: #4d4d4d;
+  --button-text-subtle: #b3b3b3;
+  --button-text-strong: #e6e6e6;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+}
+
+.c15t-button-neutral-filled {
+  background-color: var(--button-bg-dark);
+  color: var(--button-static-white);
+
+  &:hover {
+    background-color: var(--button-bg-surface);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--button-shadow-neutral-focus);
+  }
+}
+
+.c15t-button-neutral-stroke {
+  background-color: var(--button-bg-white);
+  color: var(--button-text-subtle);
+  box-shadow: var(--button-shadow-xs), inset 0 0 0 1px var(--button-stroke-soft);
+
+  &:hover {
+    background-color: var(--button-bg-light-gray);
+    color: var(--button-text-strong);
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    color: var(--button-text-strong);
+    box-shadow: var(--button-shadow-neutral-focus), inset 0 0 0 1px var(--button-text-strong);
+  }
+}
+
+.dark .c15t-button-neutral-stroke {
+  --button-text-subtle: #b3b3b3;
+  --button-bg-white: #1a1a1a;
+  --button-stroke-soft: #333;
+  --button-text-strong: #e6e6e6;
+  --button-bg-light-gray: #333;
+  --button-text-disabled: #4d4d4d;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+}
+
+.c15t-button-neutral-lighter {
+  background-color: var(--button-bg-light-gray);
+  color: var(--button-text-subtle);
+  box-shadow: inset 0 0 0 1px #0000;
+
+  &:hover {
+    background-color: var(--button-bg-white);
+    color: var(--button-text-strong);
+    box-shadow: var(--button-shadow-xs), inset 0 0 0 1px var(--button-stroke-soft);
+  }
+
+  &:focus-visible {
+    background-color: var(--button-bg-white);
+    color: var(--button-text-strong);
+    box-shadow: var(--button-shadow-neutral-focus), inset 0 0 0 1px var(--button-text-strong);
+  }
+}
+
+.dark .c15t-button-neutral-lighter {
+  --button-bg-light-gray: #333;
+  --button-text-subtle: #b3b3b3;
+  --button-bg-white: #1a1a1a;
+  --button-text-strong: #e6e6e6;
+  --button-text-disabled: #4d4d4d;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+}
+
+.c15t-button-neutral-ghost {
+  color: var(--button-text-subtle);
+  background-color: #0000;
+  box-shadow: inset 0 0 0 1px #0000;
+
+  &:hover {
+    background-color: var(--button-bg-light-gray);
+    color: var(--button-text-strong);
+  }
+
+  &:focus-visible {
+    background-color: var(--button-bg-white);
+    color: var(--button-text-strong);
+    box-shadow: var(--button-shadow-neutral-focus), inset 0 0 0 1px var(--button-text-strong);
+  }
+}
+
+.dark .c15t-button-neutral-ghost {
+  --button-bg-light-gray: #333;
+  --button-text-subtle: #b3b3b3;
+  --button-bg-white: #1a1a1a;
+  --button-text-strong: #e6e6e6;
+  --button-text-disabled: #4d4d4d;
+  --button-bg-dark: #171717;
+  --button-bg-surface: #292929;
+}
+