pentatrion-design 0.3.0 → 1.0.1

package/.github/workflows/deploy-storybook.yml

@@ -20,12 +20,10 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
-
+        # pnpm version is specified in the package.json packageManager section
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: pnpm
 
       - name: Setup Pages

package/.vscode/launch.json

@@ -9,6 +9,13 @@
       "name": "pnpm run storybook",
       "request": "launch",
       "type": "node-terminal"
+    },
+    {
+      "name": "Vitest unit current file",
+      "request": "launch",
+      "type": "node",
+      "runtimeExecutable": "vitest",
+      "runtimeArgs": ["-c", "vitest.config.ts", "${relativeFile}"]
     }
   ]
 }

package/README.md

@@ -89,7 +89,7 @@ si on désire plus de contrôle sur nos imports
 @import "pentatrion-design/tailwind/prose.css";
 ```
 
-```json
+```jsonc
 // .prettierrc
 {
   "plugins": ["prettier-plugin-tailwindcss"]

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface Props {
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    children: ReactNode;
+}
+export declare function Accordion({ value: controlledValue, defaultValue, onChange, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAIrD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID,wBAAgB,SAAS,CAAC,EACxB,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAe,EACf,QAAQ,GACT,EAAE,KAAK,2CAsBP"}

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { AccordionContext } from "./useAccordion";
+import { useEffectEvent } from "../../hooks";
+const noop = () => { };
+export function Accordion({ value: controlledValue, defaultValue, onChange = noop, children, }) {
+    const isControlled = typeof controlledValue !== "undefined";
+    const [unControlledValue, setUnControlledValue] = useState(defaultValue ?? null);
+    const value = (isControlled ? controlledValue : unControlledValue) ?? null;
+    const stableOnChange = useEffectEvent(onChange);
+    const context = useMemo(() => ({
+        value,
+        onChange(value) {
+            if (!isControlled) {
+                setUnControlledValue(value);
+            }
+            stableOnChange(value);
+        },
+    }), [value, stableOnChange, isControlled]);
+    return _jsx(AccordionContext.Provider, { value: context, children: children });
+}

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

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+interface Props extends ComponentProps<"div"> {
+    name: string;
+}
+export declare function AccordionContent({ name, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AccordionContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/AccordionContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAI1D,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAqClE"}

package/dist/components/accordion/AccordionContent.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useAccordion } from "./useAccordion";
+import clsx from "clsx";
+export function AccordionContent({ name, children, ...rest }) {
+    const { value } = useAccordion();
+    const wrapperRef = useRef(null);
+    const contentRef = useRef(null);
+    const isOpen = value === name;
+    useEffect(() => {
+        const updateHeight = () => {
+            wrapperRef.current.style.setProperty("--accordion-content-height", `${contentRef.current.scrollHeight}px`);
+        };
+        updateHeight();
+        const observer = new ResizeObserver(updateHeight);
+        observer.observe(contentRef.current);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("div", { ref: wrapperRef, className: clsx("overflow-hidden transition-[height] ease-in-out", isOpen ? "h-(--accordion-content-height)" : "h-0"), ...rest, children: _jsx("div", { className: "p-2", ref: contentRef, children: children }) }));
+}

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

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+interface Props extends ComponentProps<"div"> {
+    name: string;
+}
+export declare function AccordionItem({ name, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AccordionItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAQ/D"}

package/dist/components/accordion/AccordionItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAccordion } from "./useAccordion";
+import clsx from "clsx";
+export function AccordionItem({ name, children, ...rest }) {
+    const { value } = useAccordion();
+    return (_jsx("div", { ...rest, className: clsx(value !== name && "hidden"), children: children }));
+}

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

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+interface Props extends ComponentProps<"button"> {
+    name: string;
+}
+export declare function AccordionTrigger({ name, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AccordionTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAM,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAelE"}

package/dist/components/accordion/AccordionTrigger.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccordion } from "./useAccordion";
+import clsx from "clsx";
+export function AccordionTrigger({ name, children, ...rest }) {
+    const { value, onChange } = useAccordion();
+    return (_jsxs("button", { type: "button", onClick: () => onChange(name === value ? null : name), ...rest, className: "border-l-yellow-4 bg-gray-0 hover:border-l-yellow-4 relative mt-[-1px] flex h-12 w-full cursor-pointer border border-l-4 border-black/5 hover:z-[1] hover:border-black/15", children: [_jsx("div", { className: "flex-center h-12 w-12", children: _jsx("i", { className: clsx("fe-angle-up transition-transform", name !== value && "rotate-180") }) }), _jsx("div", { className: "flex flex-1 items-center", children: children })] }));
+}

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

@@ -0,0 +1,4 @@
+export { Accordion } from "./Accordion";
+export { AccordionTrigger } from "./AccordionTrigger";
+export { AccordionContent } from "./AccordionContent";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/accordion/index.js

@@ -0,0 +1,3 @@
+export { Accordion } from "./Accordion";
+export { AccordionTrigger } from "./AccordionTrigger";
+export { AccordionContent } from "./AccordionContent";

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

@@ -0,0 +1,9 @@
+export declare const AccordionContext: import("react").Context<{
+    value: string | null;
+    onChange: (value: string | null) => void;
+} | null>;
+export declare const useAccordion: () => {
+    value: string | null;
+    onChange: (value: string | null) => void;
+};
+//# sourceMappingURL=useAccordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/useAccordion.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;WACpB,MAAM,GAAG,IAAI;cACV,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;SAC3B,CAAC;AAEhB,eAAO,MAAM,YAAY;WAJhB,MAAM,GAAG,IAAI;cACV,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;CAWzC,CAAC"}

package/dist/components/accordion/useAccordion.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const AccordionContext = createContext(null);
+export const useAccordion = () => {
+    const context = useContext(AccordionContext);
+    if (context === null) {
+        throw new Error("useAccordion to be use inside Accordion component");
+    }
+    return context;
+};

package/dist/components/autocomplete/Autocomplete.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, ComponentProps, RefObject } from "react";
-import type { OptionLike, Option } from "../select/index.js";
-import { AutocompleteOptionProps } from "./AutocompleteOption.js";
+import type { OptionLike, Option } from "../select";
+import { AutocompleteOptionProps } from "./AutocompleteOption";
 import { Placement } from "@floating-ui/react";
-import { ThemeColor } from "../../types.js";
+import { ThemeColor } from "../../types";
 export interface AutocompleteProps<O extends OptionLike = Option> extends ComponentProps<"input"> {
     icon?: boolean | ReactNode;
     color?: ThemeColor;

package/dist/components/autocomplete/Autocomplete.js

@@ -1,16 +1,16 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState, } from "react";
-import { AutocompleteOption } from "./AutocompleteOption.js";
+import { AutocompleteOption } from "./AutocompleteOption";
 import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, } from "@floating-ui/react";
-import { AutocompleteContext } from "./useAutocompleteContext.js";
+import { AutocompleteContext } from "./useAutocompleteContext";
 import clsx from "clsx";
-import { useEffectEvent } from "../../hooks/index.js";
-import { getOptionLabel, getOptionValue } from "./util.js";
-import { Button } from "../button/index.js";
-import { Dialog } from "../dialog/index.js";
-import { Loader } from "../loader/index.js";
-import { inputConfig, sizeVariant } from "../input/Input.js";
+import { useEffectEvent } from "../../hooks";
+import { getOptionLabel, getOptionValue } from "./util";
+import { Button } from "../button";
+import { Dialog } from "../dialog";
+import { Loader } from "../loader";
+import { inputConfig, sizeVariant } from "../input/Input";
 export function Autocomplete({ className, autoFocus = false, icon = true, color = "yellow", noSearchSuffix, suffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, ref, ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);

package/dist/components/autocomplete/AutocompleteOption.d.ts

@@ -1,4 +1,4 @@
-import { OptionLike } from "../select/index.js";
+import { OptionLike } from "../select";
 export type AutocompleteOptionProps<O extends OptionLike> = O;
 export declare const AutocompleteOption: import("react").MemoExoticComponent<(<O extends OptionLike>(props: AutocompleteOptionProps<O>) => import("react/jsx-runtime").JSX.Element)>;
 //# sourceMappingURL=AutocompleteOption.d.ts.map

package/dist/components/autocomplete/AutocompleteOption.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useId } from "react";
 import { useListItem } from "@floating-ui/react";
-import { useAutocomplete } from "./useAutocompleteContext.js";
+import { useAutocomplete } from "./useAutocompleteContext";
 import clsx from "clsx";
-import { getOptionLabel, getOptionValue } from "./util.js";
+import { getOptionLabel, getOptionValue } from "./util";
 export const AutocompleteOption = memo(function AutocompleteOption(props) {
     const label = getOptionLabel(props);
     const id = useId();

package/dist/components/autocomplete/LazyAutocomplete.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteProps } from "./Autocomplete.js";
-import { OptionLike, Option } from "../select/index.js";
+import { AutocompleteProps } from "./Autocomplete";
+import { OptionLike, Option } from "../select";
 interface Props<O extends OptionLike = Option> extends Omit<AutocompleteProps<O>, "searchValue" | "onChangeSearchValue" | "options" | "selectOnFocus"> {
     onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;
     debounce?: number;

package/dist/components/autocomplete/LazyAutocomplete.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Autocomplete } from "./Autocomplete.js";
-import { getOptionLabel } from "./util.js";
-import { useStateDebounce, useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks/index.js";
+import { Autocomplete } from "./Autocomplete";
+import { getOptionLabel } from "./util";
+import { useStateDebounce, useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks";
 export function LazyAutocomplete({ onChangeSearchValueCallback, debounce = 5000, selection = null, onChangeSelection, ...rest }) {
     const onChangeSelectionStable = useEffectEvent(onChangeSelection);
     const onChangeSearchValueCallbackStable = useEffectEvent(onChangeSearchValueCallback);

package/dist/components/autocomplete/SimpleAutocomplete.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteProps } from "./Autocomplete.js";
-import { Option, OptionLike } from "../select/index.js";
+import { AutocompleteProps } from "./Autocomplete";
+import { Option, OptionLike } from "../select";
 interface Props<O extends OptionLike = Option> extends Omit<AutocompleteProps<O>, "searchValue" | "onChangeSearchValue" | "loading" | "clearSearchButton" | "selectOnFocus"> {
 }
 export declare function SimpleAutocomplete<O extends OptionLike = Option>({ options, selection, onChangeSelection, ...rest }: Props<O>): import("react/jsx-runtime").JSX.Element;

package/dist/components/autocomplete/SimpleAutocomplete.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { Autocomplete } from "./Autocomplete.js";
-import { useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks/index.js";
-import { getOptionLabel } from "./util.js";
+import { Autocomplete } from "./Autocomplete";
+import { useEffectEvent, useIsomorphicLayoutEffect } from "../../hooks";
+import { getOptionLabel } from "./util";
 export function SimpleAutocomplete({ options, selection = null, onChangeSelection, ...rest }) {
     const onChangeSelectionStable = useEffectEvent(onChangeSelection);
     const [searchValue, setSearchValue] = useState(selection ? getOptionLabel(selection) : "");

package/dist/components/autocomplete/index.d.ts

@@ -1,7 +1,7 @@
-export { Autocomplete, type AutocompleteProps } from "./Autocomplete.js";
-export { SimpleAutocomplete } from "./SimpleAutocomplete.js";
-export { AutocompleteOption } from "./AutocompleteOption.js";
-export { LazyAutocomplete } from "./LazyAutocomplete.js";
-export { useAutocomplete } from "./useAutocompleteContext.js";
-export { getOptionValue, getOptionLabel } from "./util.js";
+export { Autocomplete, type AutocompleteProps } from "./Autocomplete";
+export { SimpleAutocomplete } from "./SimpleAutocomplete";
+export { AutocompleteOption } from "./AutocompleteOption";
+export { LazyAutocomplete } from "./LazyAutocomplete";
+export { useAutocomplete } from "./useAutocompleteContext";
+export { getOptionValue, getOptionLabel } from "./util";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.js

@@ -1,6 +1,6 @@
-export { Autocomplete } from "./Autocomplete.js";
-export { SimpleAutocomplete } from "./SimpleAutocomplete.js";
-export { AutocompleteOption } from "./AutocompleteOption.js";
-export { LazyAutocomplete } from "./LazyAutocomplete.js";
-export { useAutocomplete } from "./useAutocompleteContext.js";
-export { getOptionValue, getOptionLabel } from "./util.js";
+export { Autocomplete } from "./Autocomplete";
+export { SimpleAutocomplete } from "./SimpleAutocomplete";
+export { AutocompleteOption } from "./AutocompleteOption";
+export { LazyAutocomplete } from "./LazyAutocomplete";
+export { useAutocomplete } from "./useAutocompleteContext";
+export { getOptionValue, getOptionLabel } from "./util";

package/dist/components/autocomplete/useAutocompleteContext.d.ts

@@ -1,5 +1,5 @@
 import { useInteractions } from "@floating-ui/react";
-import { OptionLike } from "../select/index.js";
+import { OptionLike } from "../select";
 interface AutocompleteContext {
     activeIndex: number | null;
     selection: OptionLike | null;

package/dist/components/autocomplete/util.d.ts

@@ -1,4 +1,4 @@
-import { OptionLike } from "../select/index.js";
+import { OptionLike } from "../select";
 export declare function getOptionLabel(option: OptionLike): string;
 export declare function getOptionValue(option: OptionLike): string | number;
 //# sourceMappingURL=util.d.ts.map

package/dist/components/badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ThemeColor } from "../../types.js";
+import { ThemeColor } from "../../types";
 interface Props {
     children: ReactNode;
     className?: string;

package/dist/components/badge/Badge.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { buttonVariants } from "../button/Button.js";
-import { Tooltip } from "../tooltip/Tooltip.js";
-import { TooltipContent } from "../tooltip/TooltipContent.js";
-import { TooltipTrigger } from "../tooltip/TooltipTrigger.js";
+import { buttonVariants } from "../button/Button";
+import { Tooltip } from "../tooltip/Tooltip";
+import { TooltipContent } from "../tooltip/TooltipContent";
+import { TooltipTrigger } from "../tooltip/TooltipTrigger";
 export function Badge({ children, className, onRemove, onClick, tooltip, url, color = "yellow", }) {
     const badge = (_jsxs("span", { "data-color": color, className: clsx("text-body-xs w-fit rounded-full", buttonVariants({
             variant: "contained",

package/dist/components/badge/index.d.ts

@@ -1,2 +1,2 @@
-export { Badge } from "./Badge.js";
+export { Badge } from "./Badge";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -1 +1 @@
-export { Badge } from "./Badge.js";
+export { Badge } from "./Badge";

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

@@ -1,10 +1,10 @@
 import { ComponentProps, RefObject } from "react";
-import { ThemeColor } from "../../types.js";
+import { ThemeColor } from "../../types";
 export interface ButtonProps extends Omit<ComponentProps<"button">, "color"> {
     withRipple?: boolean;
     variant?: "contained" | "light" | "outlined" | "text" | "ghost";
     size?: "small" | "medium" | "large" | "custom" | "input";
-    color?: ThemeColor;
+    color?: ThemeColor | "yellow-alpha" | "gray-alpha";
     width?: "fit" | "full" | "custom";
     loading?: boolean;
     disabled?: boolean;
@@ -19,10 +19,10 @@ export interface ButtonProps extends Omit<ComponentProps<"button">, "color"> {
 }
 export declare const buttonVariants: (props?: ({
     clickable?: boolean | null | undefined;
-    size?: "small" | "input" | "custom" | "medium" | "large" | null | undefined;
+    size?: "small" | "input" | "medium" | "large" | "custom" | null | undefined;
     icon?: boolean | "custom" | null | undefined;
     width?: "custom" | "fit" | "full" | null | undefined;
-    variant?: "text" | "light" | "contained" | "outlined" | "ghost" | null | undefined;
+    variant?: "light" | "text" | "contained" | "outlined" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare function Button({ withRipple, variant, loading, color, size, focusable, className, disabled, children, selected, icon, asChild, width, ref, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAM/E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEzD,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAElC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,cAAc;;;;;;8EAqD1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,UAAiB,EACjB,OAAqB,EACrB,OAAe,EACf,KAAgB,EAChB,IAAe,EACf,SAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,IAAY,EACZ,OAAe,EACf,KAAa,EACb,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,2CAyDb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAM/E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAazC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEzD,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAEnD,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAElC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,cAAc;;;;;;8EAoD1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,UAAiB,EACjB,OAAqB,EACrB,OAAe,EACf,KAAgB,EAChB,IAAe,EACf,SAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,IAAY,EACZ,OAAe,EACf,KAAa,EACb,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,2CAyDb"}

package/dist/components/button/Button.js

@@ -1,10 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { Loader } from "../loader/index.js";
-import { useRipple } from "../../hooks/index.js";
-import { Slot } from "../slot/index.js";
+import { Loader } from "../loader";
+import { useRipple } from "../../hooks";
+import { Slot } from "../slot";
 import { cva } from "class-variance-authority";
+function loaderColor(color) {
+    switch (color) {
+        case "yellow-alpha":
+            return "yellow";
+        case "gray-alpha":
+            return "gray";
+        default:
+            return color;
+    }
+}
 export const buttonVariants = cva("relative box-border inline-flex items-center leading-5 no-underline focus-visible-has:outline-2 truncate", {
     variants: {
         clickable: {
@@ -19,13 +29,13 @@ export const buttonVariants = cva("relative box-border inline-flex items-center
             custom: "",
         },
         icon: {
-            true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg)]:pr-4",
+            true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg,strong)]:pr-4",
             false: "rounded-2xl px-4",
             custom: "",
         },
         width: {
             fit: "w-full max-w-fit",
-            full: "w-full",
+            full: "w-full justify-center",
             custom: "",
         },
         variant: {
@@ -39,9 +49,9 @@ export const buttonVariants = cva("relative box-border inline-flex items-center
              */
             contained: "shadow-sm hover:shadow-md active:shadow-md-active outline-offset-0 text-custom-text bg-custom-3 hover:bg-custom-4 current:bg-custom-4  focus-visible-has:outline-custom-5",
             light: "shadow-sm hover:shadow-md has-checked:shadow-md focus:shadow-md active:shadow-md-active outline-offset-0 bg-custom-1 text-gray-text hover:text-custom-text hover:bg-custom-3 current:bg-custom-3 focus-visible-has:outline-custom-4",
-            outlined: "bg-gray-0 hover:shadow-xs active:shadow-xs-active text-gray-7 outline-offset-0 border-2 hover:bg-custom-1/50 border-custom-3 focus-visible-has:outline-custom-5 current:bg-custom-3 focus-visible-has:border-transparent",
+            outlined: "bg-custom-0 hover:shadow-xs active:shadow-xs-active text-gray-7 outline-offset-0 border-1 hover:bg-custom-1 border-custom-3 focus-visible-has:outline-custom-5 current:bg-custom-3 focus-visible-has:border-transparent",
             text: "bg-transparent hover:shadow-xs active:shadow-xs-active outline-offset-0 hover:bg-custom-1 dark:hover:bg-custom-1/50 text-gray-7 hover:text-gray-8 current:bg-custom-3 focus-visible-has:outline-custom-5",
-            ghost: "bg-transparent outline-offset-0 text-gray-7 hover:text-gray-8 current:bg-custom-1 focus-visible-has:outline-custom-5",
+            ghost: "outline-offset-0  current:bg-custom-1 focus-visible-has:outline-custom-5",
         },
     },
     defaultVariants: {
@@ -63,5 +73,5 @@ export function Button({ withRipple = true, variant = "contained", loading = fal
             size,
             width,
             icon: width === "custom" && !icon ? "custom" : icon,
-        }), className, loading && !icon && "text-transparent"), "data-color": color, "data-variant": variant, "aria-checked": selected, disabled: typeof disabled === "boolean" ? disabled : undefined, suppressHydrationWarning: true, "aria-busy": loading, ...props, children: asChild ? (children) : (_jsxs(_Fragment, { children: [!notClickable && withRipple && ripples, children, loading && (_jsx(Loader, { color: color, className: clsx("top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"), position: "absolute" }))] })) }));
+        }), className, loading && !icon && "text-transparent"), "data-color": color, "data-variant": variant, "aria-checked": selected, disabled: typeof disabled === "boolean" ? disabled : undefined, suppressHydrationWarning: true, "aria-busy": loading, ...props, children: asChild ? (children) : (_jsxs(_Fragment, { children: [!notClickable && withRipple && ripples, children, loading && (_jsx(Loader, { color: loaderColor(color), className: clsx("top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"), position: "absolute" }))] })) }));
 }

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

@@ -0,0 +1,7 @@
+import { ComponentProps, RefObject } from "react";
+import { ButtonProps } from "./Button";
+export type HrefButtonProps = ComponentProps<"a"> & Pick<ButtonProps, "withRipple" | "variant" | "size" | "color" | "selected" | "icon" | "disabled" | "width"> & {
+    ref?: RefObject<HTMLAnchorElement>;
+};
+export declare function HrefButton({ withRipple, variant, color, size, width, className, disabled, children, selected, icon, href, ref, ...props }: HrefButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HrefButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HrefButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/HrefButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,GAAG,CAAC,GAC/C,IAAI,CACF,WAAW,EACX,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CACzF,GAAG;IAAE,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAAE,CAAC;AAE7C,wBAAgB,UAAU,CAAC,EACzB,UAAiB,EACjB,OAAqB,EACrB,KAAgB,EAChB,IAAe,EACf,KAAa,EACb,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,IAAY,EACZ,IAAI,EACJ,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,2CA8BjB"}

package/dist/components/button/HrefButton.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useRef } from "react";
+import clsx from "clsx";
+import { useRipple } from "../../hooks/useRipple";
+import { buttonVariants } from "./Button";
+export function HrefButton({ withRipple = true, variant = "contained", color = "yellow", size = "medium", width = "fit", className, disabled, children, selected = false, icon = false, href, ref, ...props }) {
+    const anchorRef = useRef(null);
+    useImperativeHandle(ref, () => anchorRef.current);
+    const ripples = useRipple(anchorRef);
+    return (_jsxs("a", { role: "button", href: href, ref: anchorRef, className: clsx(buttonVariants({ variant, size, width, icon: size === "custom" ? "custom" : icon }), className, selected && "active"), "data-color": color, "data-variant": variant, "aria-checked": selected, "aria-disabled": disabled, ...props, children: [!disabled && withRipple && ripples, children] }));
+}

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

@@ -1,7 +1,7 @@
 import { ComponentProps, RefObject } from "react";
-import { ButtonProps } from "./Button.js";
-export type LinkButtonProps = ComponentProps<"a"> & Pick<ButtonProps, "withRipple" | "variant" | "size" | "color" | "selected" | "icon" | "disabled" | "width"> & {
+import { ButtonProps } from "./Button";
+export type HrefButtonProps = ComponentProps<"a"> & Pick<ButtonProps, "withRipple" | "variant" | "size" | "color" | "selected" | "icon" | "disabled" | "width"> & {
     ref?: RefObject<HTMLAnchorElement>;
 };
-export declare function LinkButton({ withRipple, variant, color, size, width, className, disabled, children, selected, icon, href, ref, ...props }: LinkButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function HrefButton({ withRipple, variant, color, size, width, className, disabled, children, selected, icon, href, ref, ...props }: HrefButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LinkButton.d.ts.map

package/dist/components/button/LinkButton.js

@@ -1,9 +1,9 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { useRipple } from "../../hooks/useRipple.js";
-import { buttonVariants } from "./Button.js";
-export function LinkButton({ withRipple = true, variant = "contained", color = "yellow", size = "medium", width = "fit", className, disabled, children, selected = false, icon = false, href, ref, ...props }) {
+import { useRipple } from "../../hooks/useRipple";
+import { buttonVariants } from "./Button";
+export function HrefButton({ withRipple = true, variant = "contained", color = "yellow", size = "medium", width = "fit", className, disabled, children, selected = false, icon = false, href, ref, ...props }) {
     const anchorRef = useRef(null);
     useImperativeHandle(ref, () => anchorRef.current);
     const ripples = useRipple(anchorRef);

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

@@ -1,4 +1,4 @@
-export { Button, type ButtonProps, buttonVariants } from "./Button.js";
-export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup.js";
-export { LinkButton } from "./LinkButton.js";
+export { Button, type ButtonProps, buttonVariants } from "./Button";
+export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup";
+export { HrefButton } from "./HrefButton";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,3 +1,3 @@
-export { Button, buttonVariants } from "./Button.js";
-export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup.js";
-export { LinkButton } from "./LinkButton.js";
+export { Button, buttonVariants } from "./Button";
+export { ButtonGroup, buttonGroupVariants } from "./ButtonGroup";
+export { HrefButton } from "./HrefButton";

package/dist/components/card/index.d.ts

@@ -1,2 +1,2 @@
-export { cardConfig } from "./config.js";
+export { cardConfig } from "./config";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -1 +1 @@
-export { cardConfig } from "./config.js";
+export { cardConfig } from "./config";

package/dist/components/code/index.d.ts

@@ -1,2 +1,2 @@
-export { Code } from "./Code.js";
+export { Code } from "./Code";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/code/index.js

@@ -1 +1 @@
-export { Code } from "./Code.js";
+export { Code } from "./Code";

package/dist/components/context-menu/ContextMenu.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState, } from "react";
 import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTypeahead, } from "@floating-ui/react";
-import { Dialog } from "../dialog/Dialog.js";
-import { useEffectEvent, useRefDebounce } from "../../hooks/index.js";
+import { Dialog } from "../dialog/Dialog";
+import { useEffectEvent, useRefDebounce } from "../../hooks";
 export function ContextMenu({ targetRef, children, style, eventName = "contextmenu" }) {
     const [activeIndex, setActiveIndex] = useState(null);
     const [isOpen, setIsOpen] = useState(false);

package/dist/components/context-menu/index.d.ts

@@ -1,3 +1,3 @@
-export { ContextMenu } from "./ContextMenu.js";
-export { ContextMenuItem, type ContextMenuItemMouseEvent } from "./ContextMenuItem.js";
+export { ContextMenu } from "./ContextMenu";
+export { ContextMenuItem, type ContextMenuItemMouseEvent } from "./ContextMenuItem";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/context-menu/index.js

@@ -1,2 +1,2 @@
-export { ContextMenu } from "./ContextMenu.js";
-export { ContextMenuItem } from "./ContextMenuItem.js";
+export { ContextMenu } from "./ContextMenu";
+export { ContextMenuItem } from "./ContextMenuItem";