@stableflow/pay-ui 0.0.1-beta-82ede460a5-20260923

package/dist/autocomplete/index.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type AutocompleteOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+type AutocompleteProps = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    options: AutocompleteOption[];
+    onSelect: (value: string) => void;
+    value?: string;
+    loading?: boolean;
+    empty?: ReactNode;
+    className?: string;
+    panelClassName?: string;
+    children: ReactNode;
+    renderOption?: (option: AutocompleteOption, active: boolean) => ReactNode;
+};
+declare function Autocomplete(props: AutocompleteProps): react.JSX.Element;
+
+declare const AUTOCOMPLETE_EMPTY = "No matching recipients";
+declare const AUTOCOMPLETE_LOADING = "Loading...";
+
+export { AUTOCOMPLETE_EMPTY, AUTOCOMPLETE_LOADING, Autocomplete, type AutocompleteOption, type AutocompleteProps };

package/dist/autocomplete/index.js

@@ -0,0 +1,229 @@
+import {
+  IconLoading
+} from "../chunk-SE7Z4ZYP.js";
+import {
+  FLOATING_ALIGN,
+  FLOATING_SIDE,
+  useFloatingPosition
+} from "../chunk-VAPGLPZ5.js";
+import {
+  floatingLayerZIndex
+} from "../chunk-RUOUGZWI.js";
+import {
+  fontSans
+} from "../chunk-FXENEWNN.js";
+import {
+  cn
+} from "../chunk-TUEV2KLC.js";
+
+// src/autocomplete/Autocomplete.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+// src/autocomplete/config.ts
+var AUTOCOMPLETE_EMPTY = "No matching recipients";
+var AUTOCOMPLETE_LOADING = "Loading...";
+
+// src/autocomplete/Autocomplete.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function optionValuesKey(options) {
+  return options.map((option) => option.value).join("\0");
+}
+function nextEnabledIndex(options, from, direction) {
+  const enabled = [];
+  for (let index = 0; index < options.length; index += 1) {
+    if (!options[index]?.disabled) enabled.push(index);
+  }
+  if (enabled.length === 0) return -1;
+  if (from < 0) return direction === 1 ? enabled[0] : enabled[enabled.length - 1];
+  const position = enabled.indexOf(from);
+  if (position < 0) return direction === 1 ? enabled[0] : enabled[enabled.length - 1];
+  const next = (position + direction + enabled.length) % enabled.length;
+  return enabled[next];
+}
+function Autocomplete(props) {
+  const {
+    open,
+    onOpenChange,
+    options,
+    onSelect,
+    value,
+    loading = false,
+    empty = AUTOCOMPLETE_EMPTY,
+    className,
+    panelClassName,
+    children,
+    renderOption
+  } = props;
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const optionRefs = useRef([]);
+  const optionsRef = useRef(options);
+  const onSelectRef = useRef(onSelect);
+  const onOpenChangeRef = useRef(onOpenChange);
+  const activeIndexRef = useRef(-1);
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const optionsKey = optionValuesKey(options);
+  const panelStyle = useFloatingPosition({
+    open,
+    triggerRef,
+    panelRef,
+    side: FLOATING_SIDE.Bottom,
+    align: FLOATING_ALIGN.Start,
+    offset: 6
+  });
+  optionsRef.current = options;
+  onSelectRef.current = onSelect;
+  onOpenChangeRef.current = onOpenChange;
+  const setActive = (index) => {
+    activeIndexRef.current = index;
+    setActiveIndex(index);
+  };
+  const close = () => onOpenChangeRef.current?.(false);
+  const selectIndex = (index) => {
+    const option = optionsRef.current[index];
+    if (!option || option.disabled) return;
+    onSelectRef.current(option.value);
+    close();
+  };
+  useLayoutEffect(() => {
+    if (!open) return;
+    const width = triggerRef.current?.getBoundingClientRect().width;
+    if (width) setTriggerWidth(width);
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      setActive(-1);
+      return;
+    }
+    const match = value != null ? optionsRef.current.findIndex((option) => option.value === value) : -1;
+    setActive(match);
+  }, [open, optionsKey, value]);
+  useLayoutEffect(() => {
+    if (!open || activeIndex < 0) return;
+    optionRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, open]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (triggerRef.current?.contains(target)) return;
+      if (panelRef.current?.contains(target)) return;
+      close();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        close();
+        return;
+      }
+      if (loading || optionsRef.current.length === 0) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setActive(nextEnabledIndex(optionsRef.current, activeIndexRef.current, 1));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActive(nextEnabledIndex(optionsRef.current, activeIndexRef.current, -1));
+        return;
+      }
+      if (event.key === "Enter") {
+        const index = activeIndexRef.current;
+        if (index < 0) return;
+        event.preventDefault();
+        selectIndex(index);
+      }
+    };
+    const onScroll = (event) => {
+      const target = event.target;
+      if (target instanceof Node && panelRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [loading, open]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "w-full min-w-0",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-activedescendant": open && activeIndex >= 0 ? `autocomplete-option-${activeIndex}` : void 0,
+        children
+      }
+    ),
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          role: "listbox",
+          style: { ...panelStyle, minWidth: triggerWidth, zIndex: floatingLayerZIndex() },
+          className: cn(
+            "max-h-60 w-max overflow-x-hidden overflow-y-auto rounded-[12px] border border-[#E0E0E0] bg-[#FDFDFD] py-1 text-base font-medium leading-normal text-black shadow-[0_0_20px_0_rgba(0,0,0,0.06)]",
+            fontSans,
+            panelClassName
+          ),
+          children: loading ? /* @__PURE__ */ jsxs(
+            "p",
+            {
+              role: "status",
+              className: cn("flex items-center justify-center gap-2 px-3 py-4 text-sm font-medium text-[#aaa]", fontSans),
+              children: [
+                /* @__PURE__ */ jsx(IconLoading, { className: "size-3.25 shrink-0 animate-spin" }),
+                AUTOCOMPLETE_LOADING
+              ]
+            }
+          ) : options.length === 0 ? /* @__PURE__ */ jsx("p", { role: "status", className: cn("px-3 py-4 text-center text-sm font-medium text-[#aaa]", fontSans), children: empty }) : options.map((option, index) => {
+            const active = index === activeIndex;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                id: `autocomplete-option-${index}`,
+                ref: (node) => {
+                  optionRefs.current[index] = node;
+                },
+                type: "button",
+                role: "option",
+                "aria-selected": active,
+                disabled: option.disabled,
+                onMouseEnter: () => {
+                  if (option.disabled) return;
+                  setActive(index);
+                },
+                onClick: () => {
+                  if (option.disabled) return;
+                  selectIndex(index);
+                },
+                className: cn(
+                  "flex cursor-pointer w-full border-0 bg-transparent text-left text-xs font-medium text-black hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-30",
+                  renderOption ? "items-center px-2.5 py-1.5" : "px-3 py-2",
+                  active && "bg-black/5"
+                ),
+                children: renderOption ? renderOption(option, active) : option.label
+              },
+              option.value
+            );
+          })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+export {
+  AUTOCOMPLETE_EMPTY,
+  AUTOCOMPLETE_LOADING,
+  Autocomplete
+};
+//# sourceMappingURL=index.js.map

package/dist/autocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/autocomplete/Autocomplete.tsx","../../src/autocomplete/config.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { IconLoading } from \"../icons/loading\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\nimport { floatingLayerZIndex } from \"../overlay/stack\";\nimport { FLOATING_ALIGN, FLOATING_SIDE, useFloatingPosition } from \"../overlay/use-floating-position\";\nimport { AUTOCOMPLETE_EMPTY, AUTOCOMPLETE_LOADING } from \"./config\";\n\nexport type AutocompleteOption = {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n};\n\nexport type AutocompleteProps = {\n  open: boolean;\n  onOpenChange?: (open: boolean) => void;\n  options: AutocompleteOption[];\n  onSelect: (value: string) => void;\n  value?: string;\n  loading?: boolean;\n  empty?: ReactNode;\n  className?: string;\n  panelClassName?: string;\n  children: ReactNode;\n  renderOption?: (option: AutocompleteOption, active: boolean) => ReactNode;\n};\n\nfunction optionValuesKey(options: readonly AutocompleteOption[]): string {\n  return options.map((option) => option.value).join(\"\\0\");\n}\n\nfunction nextEnabledIndex(options: readonly AutocompleteOption[], from: number, direction: 1 | -1): number {\n  const enabled: number[] = [];\n  for (let index = 0; index < options.length; index += 1) {\n    if (!options[index]?.disabled) enabled.push(index);\n  }\n  if (enabled.length === 0) return -1;\n  if (from < 0) return direction === 1 ? enabled[0]! : enabled[enabled.length - 1]!;\n  const position = enabled.indexOf(from);\n  if (position < 0) return direction === 1 ? enabled[0]! : enabled[enabled.length - 1]!;\n  const next = (position + direction + enabled.length) % enabled.length;\n  return enabled[next]!;\n}\n\nexport function Autocomplete(props: AutocompleteProps) {\n  const {\n    open,\n    onOpenChange,\n    options,\n    onSelect,\n    value,\n    loading = false,\n    empty = AUTOCOMPLETE_EMPTY,\n    className,\n    panelClassName,\n    children,\n    renderOption,\n  } = props;\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const optionsRef = useRef(options);\n  const onSelectRef = useRef(onSelect);\n  const onOpenChangeRef = useRef(onOpenChange);\n  const activeIndexRef = useRef(-1);\n  const [triggerWidth, setTriggerWidth] = useState<number>();\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const optionsKey = optionValuesKey(options);\n  const panelStyle = useFloatingPosition({\n    open,\n    triggerRef,\n    panelRef,\n    side: FLOATING_SIDE.Bottom,\n    align: FLOATING_ALIGN.Start,\n    offset: 6,\n  });\n\n  optionsRef.current = options;\n  onSelectRef.current = onSelect;\n  onOpenChangeRef.current = onOpenChange;\n\n  const setActive = (index: number) => {\n    activeIndexRef.current = index;\n    setActiveIndex(index);\n  };\n\n  const close = () => onOpenChangeRef.current?.(false);\n\n  const selectIndex = (index: number) => {\n    const option = optionsRef.current[index];\n    if (!option || option.disabled) return;\n    onSelectRef.current(option.value);\n    close();\n  };\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const width = triggerRef.current?.getBoundingClientRect().width;\n    if (width) setTriggerWidth(width);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      setActive(-1);\n      return;\n    }\n    const match = value != null ? optionsRef.current.findIndex((option) => option.value === value) : -1;\n    setActive(match);\n  }, [open, optionsKey, value]);\n\n  useLayoutEffect(() => {\n    if (!open || activeIndex < 0) return;\n    optionRefs.current[activeIndex]?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node | null;\n      if (!target) return;\n      if (triggerRef.current?.contains(target)) return;\n      if (panelRef.current?.contains(target)) return;\n      close();\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        close();\n        return;\n      }\n      if (loading || optionsRef.current.length === 0) return;\n      if (event.key === \"ArrowDown\") {\n        event.preventDefault();\n        setActive(nextEnabledIndex(optionsRef.current, activeIndexRef.current, 1));\n        return;\n      }\n      if (event.key === \"ArrowUp\") {\n        event.preventDefault();\n        setActive(nextEnabledIndex(optionsRef.current, activeIndexRef.current, -1));\n        return;\n      }\n      if (event.key === \"Enter\") {\n        const index = activeIndexRef.current;\n        if (index < 0) return;\n        event.preventDefault();\n        selectIndex(index);\n      }\n    };\n    const onScroll = (event: Event) => {\n      const target = event.target;\n      if (target instanceof Node && panelRef.current?.contains(target)) return;\n      close();\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    window.addEventListener(\"scroll\", onScroll, true);\n    return () => {\n      document.removeEventListener(\"mousedown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n      window.removeEventListener(\"scroll\", onScroll, true);\n    };\n  }, [loading, open]);\n\n  return (\n    <div className={cn(\"relative min-w-0\", className)}>\n      <div\n        ref={triggerRef}\n        className=\"w-full min-w-0\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-activedescendant={open && activeIndex >= 0 ? `autocomplete-option-${activeIndex}` : undefined}\n      >\n        {children}\n      </div>\n      {open && typeof document !== \"undefined\"\n        ? createPortal(\n            <div\n              ref={panelRef}\n              role=\"listbox\"\n              style={{ ...panelStyle, minWidth: triggerWidth, zIndex: floatingLayerZIndex() }}\n              className={cn(\n                \"max-h-60 w-max overflow-x-hidden overflow-y-auto rounded-[12px] border border-[#E0E0E0] bg-[#FDFDFD] py-1 text-base font-medium leading-normal text-black shadow-[0_0_20px_0_rgba(0,0,0,0.06)]\",\n                fontSans,\n                panelClassName,\n              )}\n            >\n              {loading ? (\n                <p\n                  role=\"status\"\n                  className={cn(\"flex items-center justify-center gap-2 px-3 py-4 text-sm font-medium text-[#aaa]\", fontSans)}\n                >\n                  <IconLoading className=\"size-3.25 shrink-0 animate-spin\" />\n                  {AUTOCOMPLETE_LOADING}\n                </p>\n              ) : options.length === 0 ? (\n                <p role=\"status\" className={cn(\"px-3 py-4 text-center text-sm font-medium text-[#aaa]\", fontSans)}>\n                  {empty}\n                </p>\n              ) : (\n                options.map((option, index) => {\n                  const active = index === activeIndex;\n                  return (\n                    <button\n                      key={option.value}\n                      id={`autocomplete-option-${index}`}\n                      ref={(node) => {\n                        optionRefs.current[index] = node;\n                      }}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={active}\n                      disabled={option.disabled}\n                      onMouseEnter={() => {\n                        if (option.disabled) return;\n                        setActive(index);\n                      }}\n                      onClick={() => {\n                        if (option.disabled) return;\n                        selectIndex(index);\n                      }}\n                      className={cn(\n                        \"flex cursor-pointer w-full border-0 bg-transparent text-left text-xs font-medium text-black hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-30\",\n                        renderOption ? \"items-center px-2.5 py-1.5\" : \"px-3 py-2\",\n                        active && \"bg-black/5\",\n                      )}\n                    >\n                      {renderOption ? renderOption(option, active) : option.label}\n                    </button>\n                  );\n                })\n              )}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\n\nexport default Autocomplete;\n","export const AUTOCOMPLETE_EMPTY = \"No matching recipients\";\nexport const AUTOCOMPLETE_LOADING = \"Loading...\";\n"],"mappings":"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","names":[]}

package/dist/button/index.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "normal" | "danger" | null | undefined;
+    size?: "xl" | "lg" | "md" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+    loading?: boolean;
+    rounded?: string;
+};
+declare function Button(props: ButtonProps): react.JSX.Element;
+
+declare const BUTTON_VARIANT: {
+    readonly Primary: "primary";
+    readonly Normal: "normal";
+    readonly Danger: "danger";
+};
+declare const BUTTON_SIZE: {
+    readonly Xl: "xl";
+    readonly Lg: "lg";
+    readonly Md: "md";
+    readonly Sm: "sm";
+};
+
+export { BUTTON_SIZE, BUTTON_VARIANT, Button, type ButtonProps, buttonVariants };

package/dist/button/index.js

@@ -0,0 +1,83 @@
+import {
+  IconLoading
+} from "../chunk-SE7Z4ZYP.js";
+import {
+  fontSans
+} from "../chunk-FXENEWNN.js";
+import {
+  cn
+} from "../chunk-TUEV2KLC.js";
+
+// src/button/Button.tsx
+import { cva } from "class-variance-authority";
+
+// src/button/config.ts
+var BUTTON_VARIANT = {
+  Primary: "primary",
+  Normal: "normal",
+  Danger: "danger"
+};
+var BUTTON_SIZE = {
+  Xl: "xl",
+  Lg: "lg",
+  Md: "md",
+  Sm: "sm"
+};
+
+// src/button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  `inline-flex cursor-pointer items-center justify-center gap-2 px-3 text-center ${fontSans} font-medium leading-normal transition-colors outline-none select-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30 md:px-5`,
+  {
+    variants: {
+      variant: {
+        [BUTTON_VARIANT.Primary]: "border border-transparent bg-black text-white shadow-[0_0_6px_0_rgba(0,0,0,0.06)] hover:opacity-90",
+        [BUTTON_VARIANT.Normal]: "border border-[rgba(0,0,0,0.20)] bg-white text-[#606060] shadow-[0_0_6px_0_rgba(0,0,0,0.06)] hover:bg-black/5",
+        [BUTTON_VARIANT.Danger]: "border border-transparent bg-[#ff5656] text-white shadow-[0_0_6px_0_rgba(0,0,0,0.06)] hover:opacity-90"
+      },
+      size: {
+        [BUTTON_SIZE.Xl]: "h-12 rounded-[12px] text-[15px] md:h-14 md:text-base",
+        [BUTTON_SIZE.Lg]: "h-10 rounded-[12px] text-sm md:h-[50px] md:text-base",
+        [BUTTON_SIZE.Md]: "h-8 rounded-[10px] text-[13px] md:h-10 md:text-base",
+        [BUTTON_SIZE.Sm]: "h-6 rounded-[8px] text-xl md:h-9 md:text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: BUTTON_VARIANT.Primary,
+      size: BUTTON_SIZE.Md
+    }
+  }
+);
+function Button(props) {
+  const {
+    className,
+    variant = BUTTON_VARIANT.Primary,
+    size = BUTTON_SIZE.Md,
+    loading = false,
+    rounded,
+    disabled,
+    children,
+    type = "button",
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      disabled: disabled || loading,
+      className: cn(buttonVariants({ variant, size }), rounded, className),
+      ...restProps,
+      children: [
+        loading ? /* @__PURE__ */ jsx(IconLoading, { className: "size-3.25 shrink-0 animate-spin" }) : null,
+        children
+      ]
+    }
+  );
+}
+export {
+  BUTTON_SIZE,
+  BUTTON_VARIANT,
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/button/Button.tsx","../../src/button/config.ts"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { IconLoading } from \"../icons/loading\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\nimport { BUTTON_SIZE, BUTTON_VARIANT } from \"./config\";\n\nconst buttonVariants = cva(\n  `inline-flex cursor-pointer items-center justify-center gap-2 px-3 text-center ${fontSans} font-medium leading-normal transition-colors outline-none select-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30 md:px-5`,\n  {\n  variants: {\n    variant: {\n      [BUTTON_VARIANT.Primary]:\n        \"border border-transparent bg-black text-white shadow-[0_0_6px_0_rgba(0,0,0,0.06)] hover:opacity-90\",\n      [BUTTON_VARIANT.Normal]:\n        \"border border-[rgba(0,0,0,0.20)] bg-white text-[#606060] shadow-[0_0_6px_0_rgba(0,0,0,0.06)] hover:bg-black/5\",\n      [BUTTON_VARIANT.Danger]:\n        \"border border-transparent bg-[#ff5656] text-white shadow-[0_0_6px_0_rgba(0,0,0,0.06)] hover:opacity-90\",\n    },\n    size: {\n      [BUTTON_SIZE.Xl]: \"h-12 rounded-[12px] text-[15px] md:h-14 md:text-base\",\n      [BUTTON_SIZE.Lg]: \"h-10 rounded-[12px] text-sm md:h-[50px] md:text-base\",\n      [BUTTON_SIZE.Md]: \"h-8 rounded-[10px] text-[13px] md:h-10 md:text-base\",\n      [BUTTON_SIZE.Sm]: \"h-6 rounded-[8px] text-xl md:h-9 md:text-sm\",\n    },\n  },\n  defaultVariants: {\n    variant: BUTTON_VARIANT.Primary,\n    size: BUTTON_SIZE.Md,\n  },\n});\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonVariants> & {\n    loading?: boolean;\n    rounded?: string;\n  };\n\nexport function Button(props: ButtonProps) {\n  const {\n    className,\n    variant = BUTTON_VARIANT.Primary,\n    size = BUTTON_SIZE.Md,\n    loading = false,\n    rounded,\n    disabled,\n    children,\n    type = \"button\",\n    ...restProps\n  } = props;\n\n  return (\n    <button\n      type={type}\n      disabled={disabled || loading}\n      className={cn(buttonVariants({ variant, size }), rounded, className)}\n      {...restProps}\n    >\n      {loading ? <IconLoading className=\"size-3.25 shrink-0 animate-spin\" /> : null}\n      {children}\n    </button>\n  );\n}\n\nexport { buttonVariants };\nexport default Button;\n","export const BUTTON_VARIANT = {\n  Primary: \"primary\",\n  Normal: \"normal\",\n  Danger: \"danger\",\n} as const;\n\nexport const BUTTON_SIZE = {\n  Xl: \"xl\",\n  Lg: \"lg\",\n  Md: \"md\",\n  Sm: \"sm\",\n} as const;\n"],"mappings":";;;;;;;;;;;AACA,SAAS,WAA8B;;;ACDhC,IAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,IAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;ADyCI,SAMa,KANb;AA7CJ,IAAM,iBAAiB;AAAA,EACrB,iFAAiF,QAAQ;AAAA,EACzF;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,CAAC,eAAe,OAAO,GACrB;AAAA,QACF,CAAC,eAAe,MAAM,GACpB;AAAA,QACF,CAAC,eAAe,MAAM,GACpB;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACJ,CAAC,YAAY,EAAE,GAAG;AAAA,QAClB,CAAC,YAAY,EAAE,GAAG;AAAA,QAClB,CAAC,YAAY,EAAE,GAAG;AAAA,QAClB,CAAC,YAAY,EAAE,GAAG;AAAA,MACpB;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS,eAAe;AAAA,MACxB,MAAM,YAAY;AAAA,IACpB;AAAA,EACF;AAAC;AAQM,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,eAAe;AAAA,IACzB,OAAO,YAAY;AAAA,IACnB,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH;AAAA,kBAAU,oBAAC,eAAY,WAAU,mCAAkC,IAAK;AAAA,QACxE;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/card/index.d.ts

@@ -0,0 +1,7 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+type CardProps = HTMLAttributes<HTMLDivElement>;
+declare function Card({ className, ...props }: CardProps): react.JSX.Element;
+
+export { Card, type CardProps };

package/dist/card/index.js

@@ -0,0 +1,8 @@
+import {
+  Card
+} from "../chunk-MJ36QLY3.js";
+import "../chunk-TUEV2KLC.js";
+export {
+  Card
+};
+//# sourceMappingURL=index.js.map

package/dist/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/checkbox/index.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+
+type CheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "role" | "aria-checked" | "children"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+};
+declare function Checkbox(props: CheckboxProps): react.JSX.Element;
+
+export { Checkbox, type CheckboxProps };

package/dist/checkbox/index.js

@@ -0,0 +1,54 @@
+import {
+  IconCheck
+} from "../chunk-6OV2OZVR.js";
+import {
+  cn
+} from "../chunk-TUEV2KLC.js";
+
+// src/checkbox/Checkbox.tsx
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Checkbox(props) {
+  const {
+    checked,
+    defaultChecked = false,
+    onCheckedChange,
+    disabled,
+    className,
+    type = "button",
+    onClick,
+    ...restProps
+  } = props;
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+  const isChecked = checked ?? uncontrolledChecked;
+  const toggle = () => {
+    const nextChecked = !isChecked;
+    if (checked === void 0) setUncontrolledChecked(nextChecked);
+    onCheckedChange?.(nextChecked);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      role: "checkbox",
+      "aria-checked": isChecked,
+      disabled,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        toggle();
+      },
+      className: cn(
+        "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-[#e3e3e3] bg-white p-0 text-white outline-none select-none aria-checked:bg-[#6284F5]",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30",
+        className
+      ),
+      ...restProps,
+      children: isChecked ? /* @__PURE__ */ jsx(IconCheck, { className: "size-2.5 text-white" }) : null
+    }
+  );
+}
+export {
+  Checkbox
+};
+//# sourceMappingURL=index.js.map

package/dist/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useState, type ButtonHTMLAttributes } from \"react\";\nimport { IconCheck } from \"../icons/check\";\nimport { cn } from \"../lib/cn\";\n\nexport type CheckboxProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"onChange\" | \"role\" | \"aria-checked\" | \"children\"\n> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport function Checkbox(props: CheckboxProps) {\n  const {\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    disabled,\n    className,\n    type = \"button\",\n    onClick,\n    ...restProps\n  } = props;\n  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);\n  const isChecked = checked ?? uncontrolledChecked;\n\n  const toggle = () => {\n    const nextChecked = !isChecked;\n    if (checked === undefined) setUncontrolledChecked(nextChecked);\n    onCheckedChange?.(nextChecked);\n  };\n\n  return (\n    <button\n      type={type}\n      role=\"checkbox\"\n      aria-checked={isChecked}\n      disabled={disabled}\n      onClick={(event) => {\n        onClick?.(event);\n        if (event.defaultPrevented) return;\n        toggle();\n      }}\n      className={cn(\n        \"inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-[#e3e3e3] bg-white p-0 text-white outline-none select-none aria-checked:bg-[#6284F5]\",\n        \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30\",\n        className,\n      )}\n      {...restProps}\n    >\n      {isChecked ? <IconCheck className=\"size-2.5 text-white\" /> : null}\n    </button>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;AAAA,SAAS,gBAA2C;AAmDjC;AAtCZ,SAAS,SAAS,OAAsB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,cAAc;AAC7E,QAAM,YAAY,WAAW;AAE7B,QAAM,SAAS,MAAM;AACnB,UAAM,cAAc,CAAC;AACrB,QAAI,YAAY,OAAW,wBAAuB,WAAW;AAC7D,sBAAkB,WAAW;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,gBAAc;AAAA,MACd;AAAA,MACA,SAAS,CAAC,UAAU;AAClB,kBAAU,KAAK;AACf,YAAI,MAAM,iBAAkB;AAC5B,eAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY,oBAAC,aAAU,WAAU,uBAAsB,IAAK;AAAA;AAAA,EAC/D;AAEJ;","names":[]}

package/dist/chunk-6OV2OZVR.js

@@ -0,0 +1,34 @@
+// src/icons/check.tsx
+import { jsx } from "react/jsx-runtime";
+var IconCheck = (props) => {
+  const {
+    className,
+    style
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "9",
+      height: "7",
+      viewBox: "0 0 9 7",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: className ? `sfp-icon ${className}` : "sfp-icon",
+      style,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.25247 6.72007C4.08748 6.90671 3.87132 7 3.65516 7C3.43898 7 3.22279 6.90671 3.05785 6.72007L0.241694 3.53523C0.067883 3.33872 -0.00860543 3.07875 0.000765175 2.82177C0.00904404 2.59037 0.085487 2.36091 0.241694 2.18428C0.397878 2.00752 0.600801 1.92107 0.805431 1.91171C1.03262 1.90121 1.26254 1.98761 1.43631 2.18428L3.65516 4.69348L7.5637 0.273335C7.73746 0.0767699 7.96743 -0.00973202 8.19457 0.000865348C8.3992 0.0102795 8.60215 0.0966785 8.75831 0.273335C8.91454 0.449966 8.99096 0.679559 8.99924 0.910874C9.00859 1.16781 8.93212 1.42783 8.75831 1.62439L4.25247 6.72007Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+var check_default = IconCheck;
+
+export {
+  IconCheck,
+  check_default
+};
+//# sourceMappingURL=chunk-6OV2OZVR.js.map

package/dist/chunk-6OV2OZVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/check.tsx"],"sourcesContent":["import type { IconProps } from \"./types\";\n\nexport const IconCheck = (props: IconProps) => {\n  const {\n    className,\n    style,\n  } = props;\n\n  return (\n    <svg\n      width=\"9\"\n      height=\"7\"\n      viewBox=\"0 0 9 7\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className ? `sfp-icon ${className}` : \"sfp-icon\"}\n      style={style}\n    >\n      <path\n        d=\"M4.25247 6.72007C4.08748 6.90671 3.87132 7 3.65516 7C3.43898 7 3.22279 6.90671 3.05785 6.72007L0.241694 3.53523C0.067883 3.33872 -0.00860543 3.07875 0.000765175 2.82177C0.00904404 2.59037 0.085487 2.36091 0.241694 2.18428C0.397878 2.00752 0.600801 1.92107 0.805431 1.91171C1.03262 1.90121 1.26254 1.98761 1.43631 2.18428L3.65516 4.69348L7.5637 0.273335C7.73746 0.0767699 7.96743 -0.00973202 8.19457 0.000865348C8.3992 0.0102795 8.60215 0.0966785 8.75831 0.273335C8.91454 0.449966 8.99096 0.679559 8.99924 0.910874C9.00859 1.16781 8.93212 1.42783 8.75831 1.62439L4.25247 6.72007Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default IconCheck;\n"],"mappings":";AAkBM;AAhBC,IAAM,YAAY,CAAC,UAAqB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAW,YAAY,YAAY,SAAS,KAAK;AAAA,MACjD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}