@shmidko61/lc-ui-kit 0.0.1

package/dist/box.js

@@ -0,0 +1,342 @@
+import { jsx as E } from "react/jsx-runtime";
+import { forwardRef as F } from "react";
+import { a as J, c as Q } from "./responsive-style.config-DFuATrIM.js";
+function U({
+  background: t,
+  backgroundColor: o,
+  bg: i,
+  bgSize: d,
+  bgRepeat: a,
+  bgPosition: u,
+  border: h,
+  cursor: f,
+  p: s,
+  m,
+  outlineColor: b,
+  outlineWidth: c,
+  outlineOffset: l,
+  outlineStyle: v,
+  listStyle: p,
+  display: y,
+  position: r,
+  width: R,
+  maxWidth: k,
+  minWidth: x,
+  height: S,
+  maxHeight: z,
+  minHeight: W
+}) {
+  const e = {};
+  return i !== void 0 ? lo(e, i) : t !== void 0 && (e.background = T(t)), o !== void 0 && (e.backgroundColor = T(o)), d !== void 0 && (e.backgroundSize = co(d)), a !== void 0 && (e.backgroundRepeat = so(a)), u !== void 0 && (e.backgroundPosition = bo(u)), eo(e, h), f !== void 0 && (e.cursor = f), to(e, s), io(e, m), b !== void 0 && (e.outlineColor = N(b)), c !== void 0 && (e.outlineWidth = c), l !== void 0 && (e.outlineOffset = l), v !== void 0 && (e.outlineStyle = v), p?.position !== void 0 && (e.listStylePosition = p.position), p?.type !== void 0 && (e.listStyleType = p.type), y !== void 0 && (e.display = uo(y)), r?.type !== void 0 && (e.position = r.type), r?.top !== void 0 && (e.top = C(r.top)), r?.left !== void 0 && (e.left = C(r.left)), r?.right !== void 0 && (e.right = C(r.right)), r?.bottom !== void 0 && (e.bottom = C(r.bottom)), r?.zIndex !== void 0 && (e.zIndex = r.zIndex), R !== void 0 && (e.width = g(R)), k !== void 0 && (e.maxWidth = g(k)), x !== void 0 && (e.minWidth = g(x)), S !== void 0 && (e.height = g(S)), z !== void 0 && (e.maxHeight = g(z)), W !== void 0 && (e.minHeight = g(W)), Object.keys(e).length > 0 ? e : void 0;
+}
+function X(t) {
+  const o = [], i = {}, d = t.groupParent === !0;
+  P(t, o, i, "", "", d);
+  for (const a of J) {
+    const u = t[a];
+    u && P(
+      u,
+      o,
+      i,
+      `${a}:`,
+      `${a}-`,
+      d
+    );
+  }
+  return {
+    className: o.join(" "),
+    style: Object.keys(i).length > 0 ? i : void 0
+  };
+}
+function P(t, o, i, d = "", a = "", u = !1) {
+  const h = U(t);
+  for (const [f, s] of Object.entries(h ?? {})) {
+    if (s == null)
+      continue;
+    const m = String(s), b = Y(f, m);
+    if (b) {
+      o.push(`${d}${b}`);
+      continue;
+    }
+    const c = `${a}${oo(f)}`, l = _(f, c);
+    l && (i[`--${c}`] = m, o.push(`${d}${l}`));
+  }
+  if (t.bgGroup !== void 0) {
+    const f = `${a}group-background`;
+    i[`--${f}`] = T(t.bgGroup), o.push(`${d}group-hover:[background:var(--${f})]`), u && o.push(`${d}hover:[background:var(--${f})]`);
+  }
+}
+function Y(t, o) {
+  if (t === "display")
+    return o === "none" ? "hidden" : o;
+  if (t === "position")
+    return o === "inherit" ? "[position:inherit]" : o;
+  if (t === "cursor")
+    return `cursor-${o}`;
+  if (t === "backgroundRepeat")
+    return {
+      "no-repeat": "bg-no-repeat",
+      repeat: "bg-repeat",
+      round: "bg-repeat-round",
+      space: "bg-repeat-space",
+      "repeat-x": "bg-repeat-x",
+      "repeat-y": "bg-repeat-y"
+    }[o];
+  if (t === "backgroundSize")
+    return {
+      auto: "bg-auto",
+      contain: "bg-contain",
+      cover: "bg-cover"
+    }[o];
+  if (t === "backgroundPosition")
+    return {
+      bottom: "bg-bottom",
+      center: "bg-center",
+      left: "bg-left",
+      "left bottom": "bg-left-bottom",
+      "left top": "bg-left-top",
+      right: "bg-right",
+      "right bottom": "bg-right-bottom",
+      "right top": "bg-right-top",
+      top: "bg-top"
+    }[o];
+  if (t === "borderStyle")
+    return o === "none" ? "border-none" : `border-${o}`;
+  if (t === "outlineStyle")
+    return o === "none" ? "outline-none" : `outline-${o}`;
+  if (t === "listStylePosition")
+    return `list-${o}`;
+  if (t === "listStyleType")
+    return `list-${o}`;
+}
+function _(t, o) {
+  const i = `var(--${o})`;
+  return {
+    background: `[background:${i}]`,
+    backgroundColor: `bg-[${i}]`,
+    backgroundPosition: `bg-[position:${i}]`,
+    backgroundSize: `bg-[length:${i}]`,
+    borderBottomLeftRadius: `rounded-bl-[${i}]`,
+    borderBottomRightRadius: `rounded-br-[${i}]`,
+    borderBottomWidth: `border-b-[length:${i}]`,
+    borderColor: `border-[color:${i}]`,
+    borderLeftWidth: `border-l-[length:${i}]`,
+    borderRadius: `rounded-[${i}]`,
+    borderRightWidth: `border-r-[length:${i}]`,
+    borderTopLeftRadius: `rounded-tl-[${i}]`,
+    borderTopRightRadius: `rounded-tr-[${i}]`,
+    borderTopWidth: `border-t-[length:${i}]`,
+    borderWidth: `border-[length:${i}]`,
+    bottom: `bottom-[${i}]`,
+    height: `h-[${i}]`,
+    left: `left-[${i}]`,
+    margin: `m-[${i}]`,
+    marginBottom: `mb-[${i}]`,
+    marginLeft: `ml-[${i}]`,
+    marginRight: `mr-[${i}]`,
+    marginTop: `mt-[${i}]`,
+    maxHeight: `max-h-[${i}]`,
+    maxWidth: `max-w-[${i}]`,
+    minHeight: `min-h-[${i}]`,
+    minWidth: `min-w-[${i}]`,
+    outlineColor: `outline-[color:${i}]`,
+    outlineOffset: `outline-offset-[${i}]`,
+    outlineWidth: `outline-[length:${i}]`,
+    padding: `p-[${i}]`,
+    paddingBottom: `pb-[${i}]`,
+    paddingLeft: `pl-[${i}]`,
+    paddingRight: `pr-[${i}]`,
+    paddingTop: `pt-[${i}]`,
+    right: `right-[${i}]`,
+    top: `top-[${i}]`,
+    width: `w-[${i}]`,
+    zIndex: `z-[${i}]`
+  }[t];
+}
+function oo(t) {
+  return t.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`);
+}
+function to(t, o) {
+  if (o !== void 0) {
+    if (Array.isArray(o)) {
+      t.padding = o.map(n).join(" ");
+      return;
+    }
+    if (typeof o != "object") {
+      t.padding = n(o);
+      return;
+    }
+    "px" in o && o.px !== void 0 && (t.paddingLeft = n(o.px), t.paddingRight = n(o.px)), "py" in o && o.py !== void 0 && (t.paddingTop = n(o.py), t.paddingBottom = n(o.py)), "pt" in o && o.pt !== void 0 && (t.paddingTop = n(o.pt)), "pb" in o && o.pb !== void 0 && (t.paddingBottom = n(o.pb)), "pl" in o && o.pl !== void 0 && (t.paddingLeft = n(o.pl)), "pr" in o && o.pr !== void 0 && (t.paddingRight = n(o.pr));
+  }
+}
+function io(t, o) {
+  if (o !== void 0) {
+    if (Array.isArray(o)) {
+      t.margin = o.map(n).join(" ");
+      return;
+    }
+    if (typeof o != "object") {
+      t.margin = n(o);
+      return;
+    }
+    "mx" in o && o.mx !== void 0 && (t.marginLeft = n(o.mx), t.marginRight = n(o.mx)), "my" in o && o.my !== void 0 && (t.marginTop = n(o.my), t.marginBottom = n(o.my)), "mt" in o && o.mt !== void 0 && (t.marginTop = n(o.mt)), "mb" in o && o.mb !== void 0 && (t.marginBottom = n(o.mb)), "ml" in o && o.ml !== void 0 && (t.marginLeft = n(o.ml)), "mr" in o && o.mr !== void 0 && (t.marginRight = n(o.mr));
+  }
+}
+function eo(t, o) {
+  o && (o.radius !== void 0 && no(t, o.radius), o.color !== void 0 && (t.borderColor = N(o.color)), o.width !== void 0 && ro(t, o.width), o.style !== void 0 && (t.borderStyle = o.style));
+}
+function no(t, o) {
+  if (fo(o)) {
+    o.topLeft !== void 0 && (t.borderTopLeftRadius = $(o.topLeft)), o.topRight !== void 0 && (t.borderTopRightRadius = $(o.topRight)), o.bottomLeft !== void 0 && (t.borderBottomLeftRadius = $(o.bottomLeft)), o.bottomRight !== void 0 && (t.borderBottomRightRadius = $(o.bottomRight));
+    return;
+  }
+  t.borderRadius = $(o);
+}
+function ro(t, o) {
+  if (ao(o)) {
+    o.top !== void 0 && (t.borderTopWidth = B(o.top)), o.bottom !== void 0 && (t.borderBottomWidth = B(o.bottom)), o.left !== void 0 && (t.borderLeftWidth = B(o.left)), o.right !== void 0 && (t.borderRightWidth = B(o.right));
+    return;
+  }
+  t.borderWidth = B(o);
+}
+function fo(t) {
+  return typeof t == "object";
+}
+function ao(t) {
+  return typeof t == "object";
+}
+function $(t) {
+  return t.startsWith("--") ? `var(${t})` : t;
+}
+function B(t) {
+  return t.startsWith("--") ? `var(${t})` : t;
+}
+function uo(t) {
+  return t === "hidden" ? "none" : t;
+}
+function C(t) {
+  return typeof t == "number" ? `${t}px` : t;
+}
+function n(t) {
+  return typeof t == "number" ? `${t}px` : t;
+}
+function g(t) {
+  return typeof t == "number" ? `${t}px` : t;
+}
+function co(t) {
+  return typeof t == "number" ? `${t}px` : t;
+}
+function so(t) {
+  return {
+    "no-repeat": "no-repeat",
+    repeat: "repeat",
+    "repeat-round": "round",
+    "repeat-space": "space",
+    "repeat-x": "repeat-x",
+    "repeat-y": "repeat-y"
+  }[t];
+}
+function bo(t) {
+  return t.replace("-", " ");
+}
+function T(t) {
+  return N(t);
+}
+function lo(t, o) {
+  const i = T(o);
+  if (mo(o)) {
+    t.background = i;
+    return;
+  }
+  t.backgroundColor = i;
+}
+function mo(t) {
+  const o = t.trim().toLowerCase();
+  return o.includes("url(") || o.includes("gradient(") || o.includes("image-set(") || o.includes("cross-fade(") || o.includes("element(") || o.includes("paint(");
+}
+function N(t) {
+  return t.startsWith("--") ? `var(${t})` : t;
+}
+function po(t, o) {
+  const {
+    as: i,
+    children: d,
+    className: a,
+    background: u,
+    backgroundColor: h,
+    bg: f,
+    bgSize: s,
+    bgRepeat: m,
+    bgGroup: b,
+    groupParent: c,
+    bgPosition: l,
+    border: v,
+    cursor: p,
+    p: y,
+    m: r,
+    outlineColor: R,
+    outlineWidth: k,
+    outlineOffset: x,
+    outlineStyle: S,
+    listStyle: z,
+    display: W,
+    position: e,
+    width: I,
+    maxWidth: j,
+    minWidth: w,
+    height: A,
+    maxHeight: O,
+    minHeight: G,
+    md: H,
+    lg: D,
+    xl: K,
+    style: V,
+    ...M
+  } = t, Z = i ?? "div", L = X({
+    background: u,
+    backgroundColor: h,
+    bg: f,
+    bgSize: s,
+    bgRepeat: m,
+    bgGroup: b,
+    groupParent: c,
+    bgPosition: l,
+    border: v,
+    cursor: p,
+    p: y,
+    m: r,
+    outlineColor: R,
+    outlineWidth: k,
+    outlineOffset: x,
+    outlineStyle: S,
+    listStyle: z,
+    display: W,
+    position: e,
+    width: I,
+    maxWidth: j,
+    minWidth: w,
+    height: A,
+    maxHeight: O,
+    minHeight: G,
+    md: H,
+    lg: D,
+    xl: K
+  }), q = L.style || V ? {
+    ...L.style,
+    ...V
+  } : void 0;
+  return /* @__PURE__ */ E(
+    Z,
+    {
+      className: Q(L.className, c && "group", a),
+      ref: o,
+      style: q,
+      ...M,
+      children: d
+    }
+  );
+}
+const vo = F(po);
+export {
+  vo as Box
+};

package/dist/button/button.d.ts

@@ -0,0 +1,22 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonAlignContent, ButtonBoxStyleProps, ButtonSize, ButtonVariant } from './button.helpers';
+export interface ButtonVariantProps {
+    /** Горизонтальное выравнивание контента внутри кнопки. */
+    alignContent?: ButtonAlignContent;
+    fullWidth?: boolean;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}
+type ButtonBaseProps = ButtonVariantProps & ButtonBoxStyleProps & {
+    isLoading?: boolean;
+};
+type NativeButtonProps = ButtonBaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps | 'href'> & {
+    href?: undefined;
+};
+type AnchorButtonProps = ButtonBaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps | 'href'> & {
+    href: string;
+    disabled?: boolean;
+};
+export type ButtonProps = NativeButtonProps | AnchorButtonProps;
+export declare function Button({ alignContent, children, className, disabled, display, border, bg, color, cursor, fullWidth, href, hoverBg, activeBg, fontSize, fontWeight, isLoading, lineHeight, minHeight, minWidth, md, lg, xl, p, position, size, style, variant, width, ...props }: ButtonProps): ReactNode;
+export { buttonSizeBoxProps, buttonSizeBorderRadius, buttonSizeClassNames, buttonVariantClassNames, buttonVariants, } from './button.helpers';

package/dist/button/button.helpers.d.ts

@@ -0,0 +1,119 @@
+import { CSSProperties } from 'react';
+import { BoxBreakpointProps } from '../box/box';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
+import { TypographyFontSizeValue, TypographyFontWeightValue, TypographyLineHeightValue, UiKitBackgroundValue } from '../types';
+export type ButtonAlignContent = 'start' | 'center' | 'end';
+export type ButtonAlignContentBreakpointProps = {
+    alignContent?: ButtonAlignContent;
+};
+export type ButtonColorValue = UiKitBackgroundValue;
+export type ButtonColorBreakpointProps = {
+    /** Background кнопки поверх цвета из variant. */
+    bg?: ButtonColorValue;
+    /** Цвет текста и иконок кнопки поверх цвета из variant. */
+    color?: ButtonColorValue;
+    /** Background кнопки при hover. Если не передан, при `bg` используется тот же цвет. */
+    hoverBg?: ButtonColorValue;
+    /** Background кнопки при active. Если не передан, при `bg` используется hover/base цвет. */
+    activeBg?: ButtonColorValue;
+};
+export type ButtonTypographyBreakpointProps = {
+    /** Font-size кнопки поверх типографики из size. */
+    fontSize?: TypographyFontSizeValue;
+    /** Font-weight кнопки поверх типографики из size. */
+    fontWeight?: TypographyFontWeightValue;
+    /** Line-height кнопки поверх типографики из size. */
+    lineHeight?: TypographyLineHeightValue;
+};
+export type ButtonVariant = keyof typeof buttonVariantClassNames;
+export type ButtonSize = keyof typeof buttonSizeClassNames;
+export type ButtonVariantBreakpointProps = {
+    /** Визуальный variant кнопки для конкретного breakpoint-а. */
+    variant?: ButtonVariant;
+};
+export type ButtonSizeBreakpointProps = {
+    /** Размер кнопки для конкретного breakpoint-а. */
+    size?: ButtonSize;
+};
+export type ButtonBreakpointProps = Omit<BoxBreakpointProps, 'bg'> & ButtonAlignContentBreakpointProps & ButtonColorBreakpointProps & ButtonTypographyBreakpointProps & ButtonVariantBreakpointProps & ButtonSizeBreakpointProps;
+export type ButtonBoxStyleProps = Omit<BoxBreakpointProps, 'bg'> & ButtonColorBreakpointProps & ButtonTypographyBreakpointProps & Partial<Record<ResponsiveStyleBreakpoint, ButtonBreakpointProps>>;
+type ButtonAlignContentResponsiveProps = ButtonAlignContentBreakpointProps & Partial<Record<ResponsiveStyleBreakpoint, ButtonAlignContentBreakpointProps>>;
+type ButtonSizeResponsiveProps = ButtonSizeBreakpointProps & {
+    p?: BoxBreakpointProps['p'];
+} & Partial<Record<ResponsiveStyleBreakpoint, Pick<ButtonBreakpointProps, 'p' | 'size'>>>;
+type ButtonVariantResponsiveProps = ButtonVariantBreakpointProps & Partial<Record<ResponsiveStyleBreakpoint, ButtonVariantBreakpointProps>>;
+type ButtonColorResponsiveProps = ButtonColorBreakpointProps & Partial<Record<ResponsiveStyleBreakpoint, ButtonColorBreakpointProps>>;
+type ButtonTypographyResponsiveProps = ButtonTypographyBreakpointProps & Partial<Record<ResponsiveStyleBreakpoint, ButtonTypographyBreakpointProps>>;
+type ButtonTypographyStyle = CSSProperties & Record<`--${string}`, string | number>;
+export declare const buttonVariantClassNames: {
+    readonly default: "bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#000)]";
+    readonly secondary: "bg-[var(--color-background-subtle)] text-[var(--color-text-primary)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] active:bg-[color-mix(in_srgb,var(--color-background-subtle)_80%,#fff)]";
+    readonly destructive: "bg-[var(--color-secondary-accent-2)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#000)]";
+    readonly success: "bg-[var(--color-secondary-accent-1)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#000)]";
+    readonly dark: "bg-[var(--color-text-primary)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#000)]";
+    readonly transparent: "bg-transparent text-[var(--color-text-primary)] hover:bg-transparent active:bg-transparent";
+};
+export declare const buttonSizeClassNames: {
+    readonly sm: "text-[13px] font-medium leading-[120%] [&_svg]:size-4";
+    readonly md: "text-[15px] font-medium leading-[140%] [&_svg]:size-5";
+    readonly lg: "text-[18px] font-medium leading-[140%] [&_svg]:size-5";
+};
+export declare const buttonSizePaddingClassNames: {
+    readonly sm: "px-[12px] py-[6px]";
+    readonly md: "px-[16px] py-[10px]";
+    readonly lg: "px-[20px] py-[10px]";
+};
+export declare const buttonSizeBorderRadius: {
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "12px";
+};
+export declare const buttonBaseClassName = "box-border shrink-0 items-center overflow-hidden tracking-normal transition-colors duration-150 [font-family:var(--font-family)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+export declare const buttonVariants: (props?: ({
+    variant?: "default" | "transparent" | "dark" | "secondary" | "destructive" | "success" | null | undefined;
+    size?: "md" | "lg" | "sm" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonSizeBoxProps: {
+    readonly sm: {
+        readonly minWidth: 32;
+        readonly p: {
+            readonly px: 12;
+            readonly py: 8;
+        };
+    };
+    readonly md: {
+        readonly p: {
+            readonly px: 16;
+            readonly py: 10;
+        };
+    };
+    readonly lg: {
+        readonly p: {
+            readonly px: 32;
+            readonly py: 16;
+        };
+    };
+};
+export declare function buildButtonAlignContentClassNamePlan({ alignContent, md, lg, xl, }: ButtonAlignContentResponsiveProps): {
+    className: string;
+    style: CSSProperties | undefined;
+};
+export declare function buildButtonVariantClassNamePlan({ variant, md, lg, xl }: ButtonVariantResponsiveProps, colorOverrides?: ButtonColorResponsiveProps): {
+    className: string;
+    style: CSSProperties | undefined;
+};
+export declare function buildButtonColorClassNamePlan({ activeBg, bg, color, hoverBg, md, lg, xl, }: ButtonColorResponsiveProps): {
+    className: string;
+    style: CSSProperties | undefined;
+};
+export declare function buildButtonTypographyClassNamePlan({ fontSize, fontWeight, lineHeight, md, lg, xl, }: ButtonTypographyResponsiveProps): {
+    className: string;
+    style: CSSProperties | undefined;
+};
+export declare function buildButtonSizeClassNamePlan({ size, md, lg, xl, }: ButtonSizeResponsiveProps): {
+    className: string;
+    style: ButtonTypographyStyle;
+};
+export declare function getButtonBoxBreakpointProps(breakpointProps: ButtonBreakpointProps | undefined): BoxBreakpointProps | undefined;
+export {};

package/dist/button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),E=require("./box.cjs"),st=require("./responsive-style.config-B2m9jVlX.cjs"),lt=require("class-variance-authority"),B=require("./responsive-style.utils-BdyoDkKg.cjs"),G={default:"bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#000)]",secondary:"bg-[var(--color-background-subtle)] text-[var(--color-text-primary)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] active:bg-[color-mix(in_srgb,var(--color-background-subtle)_80%,#fff)]",destructive:"bg-[var(--color-secondary-accent-2)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#000)]",success:"bg-[var(--color-secondary-accent-1)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#000)]",dark:"bg-[var(--color-text-primary)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#000)]",transparent:"bg-transparent text-[var(--color-text-primary)] hover:bg-transparent active:bg-transparent"},J={sm:"text-[13px] font-medium leading-[120%] [&_svg]:size-4",md:"text-[15px] font-medium leading-[140%] [&_svg]:size-5",lg:"text-[18px] font-medium leading-[140%] [&_svg]:size-5"},w={sm:"6px",md:"8px",lg:"12px"},K="box-border shrink-0 items-center overflow-hidden tracking-normal transition-colors duration-150 [font-family:var(--font-family)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",ct=lt.cva([K,"[justify-content:var(--button-justify-content,center)]"].join(" "),{variants:{variant:G,size:J,fullWidth:{true:"w-full"}},defaultVariants:{variant:"default",size:"md"}}),T={sm:{minWidth:32,p:{px:12,py:8}},md:{p:{px:16,py:10}},lg:{p:{px:32,py:16}}},gt={base:"[justify-content:var(--button-justify-content)]",md:"md:[justify-content:var(--md-button-justify-content)]",lg:"lg:[justify-content:var(--lg-button-justify-content)]",xl:"xl:[justify-content:var(--xl-button-justify-content)]"},ut={default:{activeBg:"color-mix(in srgb, var(--color-primary-accent) 80%, #000)",bg:"--color-primary-accent",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-primary-accent) 80%, #fff)"},secondary:{activeBg:"color-mix(in srgb, var(--color-background-subtle) 80%, #fff)",bg:"--color-background-subtle",color:"--color-text-primary",hoverBg:"color-mix(in srgb, var(--color-background-subtle) 90%, #000)"},destructive:{activeBg:"color-mix(in srgb, var(--color-secondary-accent-2) 80%, #000)",bg:"--color-secondary-accent-2",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-secondary-accent-2) 80%, #fff)"},success:{activeBg:"color-mix(in srgb, var(--color-secondary-accent-1) 80%, #000)",bg:"--color-secondary-accent-1",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-secondary-accent-1) 80%, #fff)"},dark:{activeBg:"color-mix(in srgb, var(--color-text-primary) 80%, #000)",bg:"--color-text-primary",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-text-primary) 80%, #fff)"},transparent:{activeBg:"transparent",bg:"transparent",color:"--color-text-primary",hoverBg:"transparent"}},bt={sm:"[&_svg]:size-4",md:"[&_svg]:size-5",lg:"[&_svg]:size-5"},vt={sm:{fontSize:"13px",fontWeight:500,lineHeight:"120%"},md:{fontSize:"15px",fontWeight:500,lineHeight:"140%"},lg:{fontSize:"18px",fontWeight:500,lineHeight:"140%"}};function dt({alignContent:o,md:t,lg:r,xl:a}){const e=[],n={};return m(o,e,n,"base"),m(t?.alignContent,e,n,"md","md-"),m(r?.alignContent,e,n,"lg","lg-"),m(a?.alignContent,e,n,"xl","xl-"),{className:e.join(" "),style:Object.keys(n).length?n:void 0}}function ft({variant:o,md:t,lg:r,xl:a},e={}){const n=[],i={};return x(o,e,n,i),x(t?.variant,e.md,n,i,"md"),x(r?.variant,e.lg,n,i,"lg"),x(a?.variant,e.xl,n,i,"xl"),{className:n.join(" "),style:Object.keys(i).length?i:void 0}}function mt({activeBg:o,bg:t,color:r,hoverBg:a,md:e,lg:n,xl:i}){const s=[],l={};return y({activeBg:o,bg:t,color:r,hoverBg:a},s,l),y(e,s,l,"md"),y(n,s,l,"lg"),y(i,s,l,"xl"),{className:s.join(" "),style:Object.keys(l).length?l:void 0}}function ht({fontSize:o,fontWeight:t,lineHeight:r,md:a,lg:e,xl:n}){const i=[],s={};return z({fontSize:o,fontWeight:t,lineHeight:r},i,s),z(a,i,s,"md"),z(e,i,s,"lg"),z(n,i,s,"xl"),{className:i.join(" "),style:Object.keys(s).length?s:void 0}}function xt({size:o="md",md:t,lg:r,xl:a}){const e=[bt[o],p.fontSize,p.fontWeight,p.lineHeight],n={};return h(o,e,n),h(t?.size,e,n,"md"),h(r?.size,e,n,"lg"),h(a?.size,e,n,"xl"),{className:e.join(" "),style:n}}function H(o){if(!o)return;const t={...o};return(o.size||o.border)&&(t.border={radius:o.size?w[o.size]:void 0,...o.border}),o.size&&o.p===void 0&&(t.p=T[o.size].p),delete t.activeBg,delete t.alignContent,delete t.bg,delete t.color,delete t.fontSize,delete t.fontWeight,delete t.hoverBg,delete t.lineHeight,delete t.size,delete t.variant,t}function m(o,t,r,a,e=""){if(!o)return;const n=`${e}button-justify-content`;r[`--${n}`]=zt(o),t.push(gt[a])}function h(o,t,r,a){if(!o)return;const{fontSize:e,fontWeight:n,lineHeight:i}=vt[o];if(!a){r["--button-font-size"]=e,r["--button-font-weight"]=n,r["--button-line-height"]=i;return}r[`--${a}-button-font-size`]=e,r[`--${a}-button-font-weight`]=n,r[`--${a}-button-line-height`]=i,t.push(yt[a][o],_[a].fontSize,_[a].fontWeight,_[a].lineHeight)}function x(o,t,r,a,e){if(!o)return;const n=e?Q[e]:L,i=e?`${e}-`:"",s=ut[o];t?.bg===void 0&&(a[`--${i}button-bg`]=c(s.bg),r.push(n.bg)),t?.color===void 0&&(a[`--${i}button-color`]=c(s.color),r.push(n.color)),t?.bg===void 0&&t?.hoverBg===void 0&&(a[`--${i}button-hover-bg`]=c(s.hoverBg),r.push(n.hoverBg)),t?.bg===void 0&&t?.hoverBg===void 0&&t?.activeBg===void 0&&(a[`--${i}button-active-bg`]=c(s.activeBg),r.push(n.activeBg))}function y(o,t,r,a){if(!o)return;const{activeBg:e,bg:n,color:i,hoverBg:s}=o,l=a?Q[a]:L,v=a?`${a}-`:"";n!==void 0&&(r[`--${v}button-bg`]=c(n),t.push(l.bg,l.hoverBg,l.activeBg)),s!==void 0&&(r[`--${v}button-hover-bg`]=c(s),t.push(l.hoverBg)),e!==void 0&&(r[`--${v}button-active-bg`]=c(e),t.push(l.activeBg)),i!==void 0&&(r[`--${v}button-color`]=c(i),t.push(l.color))}function z(o,t,r,a){if(!o)return;const{fontSize:e,fontWeight:n,lineHeight:i}=o,s=a?_[a]:p,l=a?`${a}-`:"";e!==void 0&&(r[`--${l}button-font-size`]=B.normalizeCssTokenValue(e),t.push(s.fontSize)),n!==void 0&&(r[`--${l}button-font-weight`]=B.normalizeCssTokenValue(n),t.push(s.fontWeight)),i!==void 0&&(r[`--${l}button-line-height`]=B.normalizeCssTokenValue(i),t.push(s.lineHeight))}const L={activeBg:"active:bg-[var(--button-active-bg,var(--button-hover-bg,var(--button-bg)))]",bg:"bg-[var(--button-bg)]",color:"text-[var(--button-color)]",hoverBg:"hover:bg-[var(--button-hover-bg,var(--button-bg))]"},p={fontSize:"text-[length:var(--button-font-size)]",fontWeight:"font-[var(--button-font-weight)]",lineHeight:"leading-[var(--button-line-height)]"},Q={md:{activeBg:"md:active:bg-[var(--md-button-active-bg,var(--md-button-hover-bg,var(--md-button-bg)))]",bg:"md:bg-[var(--md-button-bg)]",color:"md:text-[var(--md-button-color)]",hoverBg:"md:hover:bg-[var(--md-button-hover-bg,var(--md-button-bg))]"},lg:{activeBg:"lg:active:bg-[var(--lg-button-active-bg,var(--lg-button-hover-bg,var(--lg-button-bg)))]",bg:"lg:bg-[var(--lg-button-bg)]",color:"lg:text-[var(--lg-button-color)]",hoverBg:"lg:hover:bg-[var(--lg-button-hover-bg,var(--lg-button-bg))]"},xl:{activeBg:"xl:active:bg-[var(--xl-button-active-bg,var(--xl-button-hover-bg,var(--xl-button-bg)))]",bg:"xl:bg-[var(--xl-button-bg)]",color:"xl:text-[var(--xl-button-color)]",hoverBg:"xl:hover:bg-[var(--xl-button-hover-bg,var(--xl-button-bg))]"}},_={md:{fontSize:"md:text-[length:var(--md-button-font-size)]",fontWeight:"md:font-[var(--md-button-font-weight)]",lineHeight:"md:leading-[var(--md-button-line-height)]"},lg:{fontSize:"lg:text-[length:var(--lg-button-font-size)]",fontWeight:"lg:font-[var(--lg-button-font-weight)]",lineHeight:"lg:leading-[var(--lg-button-line-height)]"},xl:{fontSize:"xl:text-[length:var(--xl-button-font-size)]",fontWeight:"xl:font-[var(--xl-button-font-weight)]",lineHeight:"xl:leading-[var(--xl-button-line-height)]"}},yt={md:{sm:"md:[&_svg]:size-4",md:"md:[&_svg]:size-5",lg:"md:[&_svg]:size-5"},lg:{sm:"lg:[&_svg]:size-4",md:"lg:[&_svg]:size-5",lg:"lg:[&_svg]:size-5"},xl:{sm:"xl:[&_svg]:size-4",md:"xl:[&_svg]:size-5",lg:"xl:[&_svg]:size-5"}};function c(o){return String(B.normalizeCssTokenValue(o))}function zt(o){return{center:"center",end:"flex-end",start:"flex-start"}[o]}function Bt({alignContent:o,children:t,className:r,disabled:a,display:e,border:n,bg:i,color:s,cursor:l,fullWidth:v,href:C,hoverBg:A,activeBg:R,fontSize:U,fontWeight:X,isLoading:Y=!1,lineHeight:Z,minHeight:O,minWidth:tt,md:g,lg:u,xl:b,p:ot,position:nt,size:et,style:q,variant:at,width:rt,...S}){const d=a||Y,N=et??"md",j=xt({size:N,md:g,lg:u,xl:b}),$=dt({alignContent:o,md:g,lg:u,xl:b}),V=ft({variant:at??"default",md:g,lg:u,xl:b},{activeBg:R,bg:i,color:s,hoverBg:A,md:g,lg:u,xl:b}),W=mt({activeBg:R,bg:i,color:s,hoverBg:A,md:g,lg:u,xl:b}),P=ht({fontSize:U,fontWeight:X,lineHeight:Z,md:g,lg:u,xl:b}),k={...S,border:{radius:w[N],style:"none",width:"0",...n},cursor:d?"not-allowed":l??"pointer",display:e??"inline-flex",minHeight:O,minWidth:tt,md:H(g),lg:H(u),xl:H(b),p:ot??T[N].p,position:nt??{type:"relative"},width:rt??(v?"100%":void 0)},I=st.cn(K,j.className,C&&"no-underline",$.className,V.className,W.className,P.className,r),D=j.style||$.style||V.style||W.style||P.style||q?{...j.style,...$.style,...V.style,...W.style,...P.style,...q}:void 0,F=f.jsx(f.Fragment,{children:t});if(C){const M=S;return f.jsx(E.Box,{...M,...k,"aria-disabled":d||void 0,as:"a",className:I,href:d?void 0:C,style:D,tabIndex:d?-1:M.tabIndex,children:F})}const it=S;return f.jsx(E.Box,{...it,...k,as:"button",className:I,disabled:d,style:D,children:F})}exports.Button=Bt;exports.buttonSizeBorderRadius=w;exports.buttonSizeBoxProps=T;exports.buttonSizeClassNames=J;exports.buttonVariantClassNames=G;exports.buttonVariants=ct;