@arkyn/components 3.0.1-beta.2 → 3.0.1-beta.21

package/dist/documentation/src/app.d.ts

@@ -0,0 +1,3 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export { App };
+//# sourceMappingURL=app.d.ts.map

package/dist/documentation/src/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../documentation/src/app.tsx"],"names":[],"mappings":"AAwBA,iBAAS,GAAG,4CAkEX;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/documentation/src/app.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MultiSelect } from "@components";
+import { useState } from "react";
+import { AlertExamples } from "./components/examples.alert";
+import { AudioPlayerExamples } from "./components/examples.audioPlayer";
+import { BadgeExamples } from "./components/examples.badge";
+import { ButtonExamples } from "./components/examples.button";
+import { CardTabExamples } from "./components/examples.cardTab";
+import { CheckboxExamples } from "./components/examples.checkbox";
+import { CurrencyInputExamples } from "./components/examples.currencyInput";
+import { DividerExamples } from "./components/examples.divider";
+import { DrawerExamples } from "./components/examples.drawer";
+import { IconButtonExamples } from "./components/examples.iconButton";
+import { InputExamples } from "./components/examples.input";
+import { MaskedInputExamples } from "./components/examples.maskedInput";
+import { ModalExamples } from "./components/examples.modal";
+import { MultiSelectExamples } from "./components/examples.multiSelect";
+import { SliderExamples } from "./components/examples.slider";
+import { TabExamples } from "./components/examples.tab";
+import { TooltipExamples } from "./components/examples.tooltip";
+import { RadioExamples } from "./components/examples.radio";
+import { SwitchExamples } from "./components/examples.switch";
+import { TextareaExamples } from "./components/examples.texarea";
+import { PhoneInputExamples } from "./components/examples.phoneInput";
+function App() {
+    const [selectedOption, setSelectedOption] = useState([]);
+    const options = [
+        { label: "Alert", value: "alert" },
+        { label: "AudioPlayer", value: "audio-player" },
+        { label: "Badge", value: "badge" },
+        { label: "Button", value: "button" },
+        { label: "CardTab", value: "card-tab" },
+        { label: "Checkbox", value: "checkbox" },
+        { label: "CurrencyInput", value: "currency-input" },
+        { label: "Divider", value: "divider" },
+        { label: "Drawer", value: "drawer" },
+        { label: "IconButton", value: "icon-button" },
+        { label: "Input", value: "input" },
+        { label: "MaskedInput", value: "masked-input" },
+        { label: "Modal", value: "modal" },
+        { label: "MultiSelect", value: "multi-select" },
+        { label: "PhoneInput", value: "phone-input" },
+        { label: "Radio", value: "radio" },
+        { label: "Slider", value: "slider" },
+        { label: "Switch", value: "switch" },
+        { label: "Tab", value: "tab" },
+        { label: "Textarea", value: "textarea" },
+        { label: "Tooltip", value: "tooltip" },
+    ];
+    function showExamples(value) {
+        return selectedOption.includes(value);
+    }
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 40, padding: 40 }, children: [_jsx(MultiSelect, { isSearchable: true, label: "Select the examples:", name: "selectedOptions", options: options, onChange: setSelectedOption }), showExamples("alert") && _jsx(AlertExamples, {}), showExamples("audio-player") && _jsx(AudioPlayerExamples, {}), showExamples("badge") && _jsx(BadgeExamples, {}), showExamples("button") && _jsx(ButtonExamples, {}), showExamples("card-tab") && _jsx(CardTabExamples, {}), showExamples("checkbox") && _jsx(CheckboxExamples, {}), showExamples("currency-input") && _jsx(CurrencyInputExamples, {}), showExamples("divider") && _jsx(DividerExamples, {}), showExamples("drawer") && _jsx(DrawerExamples, {}), showExamples("icon-button") && _jsx(IconButtonExamples, {}), showExamples("input") && _jsx(InputExamples, {}), showExamples("masked-input") && _jsx(MaskedInputExamples, {}), showExamples("modal") && _jsx(ModalExamples, {}), showExamples("multi-select") && _jsx(MultiSelectExamples, {}), showExamples("phone-input") && _jsx(PhoneInputExamples, {}), showExamples("radio") && _jsx(RadioExamples, {}), showExamples("slider") && _jsx(SliderExamples, {}), showExamples("switch") && _jsx(SwitchExamples, {}), showExamples("tab") && _jsx(TabExamples, {}), showExamples("textarea") && _jsx(TextareaExamples, {}), showExamples("tooltip") && _jsx(TooltipExamples, {})] }));
+}
+export { App };

package/dist/documentation/src/components/examples.alert.d.ts

@@ -0,0 +1,3 @@
+declare function AlertExamples(): import("react/jsx-runtime").JSX.Element;
+export { AlertExamples };
+//# sourceMappingURL=examples.alert.d.ts.map

package/dist/documentation/src/components/examples.alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.alert.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.alert.tsx"],"names":[],"mappings":"AAUA,iBAAS,aAAa,4CAoCrB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/documentation/src/components/examples.alert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertContainer, AlertContent, AlertDescription, AlertIcon, AlertTitle, } from "@components";
+import { Box } from "../ui/box";
+function AlertExamples() {
+    return (_jsxs(Box, { title: "Alert", children: [_jsxs(AlertContainer, { schema: "danger", children: [_jsx(AlertIcon, {}), _jsxs(AlertContent, { children: [_jsx(AlertTitle, { children: "Alert title" }), _jsx(AlertDescription, { children: "This is an alert description" })] })] }), _jsxs(AlertContainer, { schema: "info", children: [_jsx(AlertIcon, {}), _jsxs(AlertContent, { children: [_jsx(AlertTitle, { children: "Info title" }), _jsx(AlertDescription, { children: "This is an info description" })] })] }), _jsxs(AlertContainer, { schema: "success", children: [_jsx(AlertIcon, {}), _jsxs(AlertContent, { children: [_jsx(AlertTitle, { children: "Success title" }), _jsx(AlertDescription, { children: "This is a success description" })] })] }), _jsxs(AlertContainer, { schema: "warning", children: [_jsx(AlertIcon, {}), _jsxs(AlertContent, { children: [_jsx(AlertTitle, { children: "Warning title" }), _jsx(AlertDescription, { children: "This is a warning description" })] })] })] }));
+}
+export { AlertExamples };

package/dist/documentation/src/components/examples.audioPlayer.d.ts

@@ -0,0 +1,3 @@
+declare function AudioPlayerExamples(): import("react/jsx-runtime").JSX.Element;
+export { AudioPlayerExamples };
+//# sourceMappingURL=examples.audioPlayer.d.ts.map

package/dist/documentation/src/components/examples.audioPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.audioPlayer.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.audioPlayer.tsx"],"names":[],"mappings":"AAMA,iBAAS,mBAAmB,4CAO3B;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.audioPlayer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AudioPlayer } from "@components";
+import { Box } from "../ui/box";
+const AUDIO_PLAYER_SRC = `http://codeskulptor-demos.commondatastorage.googleapis.com/pang/paza-moduless.mp3`;
+function AudioPlayerExamples() {
+    return (_jsxs(Box, { title: "AudioPlayer", children: [_jsx(AudioPlayer, { src: AUDIO_PLAYER_SRC }), _jsx(AudioPlayer, { src: AUDIO_PLAYER_SRC, disabled: true })] }));
+}
+export { AudioPlayerExamples };

package/dist/documentation/src/components/examples.badge.d.ts

@@ -0,0 +1,3 @@
+declare function BadgeExamples(): import("react/jsx-runtime").JSX.Element;
+export { BadgeExamples };
+//# sourceMappingURL=examples.badge.d.ts.map

package/dist/documentation/src/components/examples.badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.badge.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.badge.tsx"],"names":[],"mappings":"AAMA,iBAAS,aAAa,4CA6BrB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/documentation/src/components/examples.badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@components";
+import { Star } from "lucide-react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function BadgeExamples() {
+    return (_jsxs(Box, { title: "Badge", children: [_jsxs(Row, { children: [_jsx(Badge, { children: "variant - ghost (default)" }), _jsx(Badge, { variant: "outline", children: "variant - outline" }), _jsx(Badge, { variant: "solid", children: "variant - solid" })] }), _jsxs(Row, { children: [_jsx(Badge, { size: "md", children: "size - md " }), _jsx(Badge, { children: "size - lg (default)" })] }), _jsxs(Row, { children: [_jsx(Badge, { children: "scheme - primary (default)" }), _jsx(Badge, { scheme: "secondary", children: "scheme - secondary" }), _jsx(Badge, { scheme: "danger", children: "scheme - danger" }), _jsx(Badge, { scheme: "info", children: "scheme - info" }), _jsx(Badge, { scheme: "success", children: "scheme - success" }), _jsx(Badge, { scheme: "warning", children: "scheme - warning" })] }), _jsxs(Row, { children: [_jsx(Badge, { leftIcon: Star, children: "leftIcon" }), _jsx(Badge, { rightIcon: Star, children: "rightIcon" })] })] }));
+}
+export { BadgeExamples };

package/dist/documentation/src/components/examples.button.d.ts

@@ -0,0 +1,3 @@
+declare function ButtonExamples(): import("react/jsx-runtime").JSX.Element;
+export { ButtonExamples };
+//# sourceMappingURL=examples.button.d.ts.map

package/dist/documentation/src/components/examples.button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.button.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.button.tsx"],"names":[],"mappings":"AAMA,iBAAS,cAAc,4CAyDtB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/documentation/src/components/examples.button.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@components";
+import { Star } from "lucide-react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function ButtonExamples() {
+    return (_jsxs(Box, { title: "Button", children: [_jsxs(Row, { children: [_jsx(Button, { children: "variant - ghost (default)" }), _jsx(Button, { variant: "outline", children: "variant - outline" }), _jsx(Button, { variant: "ghost", children: "variant - ghost" }), _jsx(Button, { variant: "invisible", children: "variant - invisible" })] }), _jsxs(Row, { children: [_jsx(Button, { size: "xs", children: "size - xs" }), _jsx(Button, { size: "sm", children: "size - sm" }), _jsx(Button, { children: "size - md (default)" }), _jsx(Button, { size: "lg", children: "size - lg" })] }), _jsxs(Row, { children: [_jsx(Button, { children: "scheme - primary (default)" }), _jsx(Button, { scheme: "danger", children: "scheme - danger" }), _jsx(Button, { scheme: "info", children: "scheme - info" }), _jsx(Button, { scheme: "success", children: "scheme - success" }), _jsx(Button, { scheme: "warning", children: "scheme - warning" })] }), _jsxs(Row, { children: [_jsx(Button, { leftIcon: Star, children: "leftIcon" }), _jsx(Button, { rightIcon: Star, children: "rightIcon" })] }), _jsxs(Row, { children: [_jsx(Button, { isLoading: true, size: "xs", children: "isLoading" }), _jsx(Button, { isLoading: true, size: "sm", children: "isLoading" }), _jsx(Button, { isLoading: true, children: "isLoading" }), _jsx(Button, { isLoading: true, size: "lg", children: "isLoading" })] }), _jsxs(Row, { children: [_jsx(Button, { isLoading: true, size: "xs", loadingText: "Loading...", children: "isLoading" }), _jsx(Button, { isLoading: true, size: "sm", loadingText: "Loading...", children: "isLoading" }), _jsx(Button, { isLoading: true, loadingText: "Loading...", children: "isLoading" }), _jsx(Button, { isLoading: true, size: "lg", loadingText: "Loading...", children: "isLoading" })] })] }));
+}
+export { ButtonExamples };

package/dist/documentation/src/components/examples.cardTab.d.ts

@@ -0,0 +1,3 @@
+declare function CardTabExamples(): import("react/jsx-runtime").JSX.Element;
+export { CardTabExamples };
+//# sourceMappingURL=examples.cardTab.d.ts.map

package/dist/documentation/src/components/examples.cardTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.cardTab.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.cardTab.tsx"],"names":[],"mappings":"AAGA,iBAAS,eAAe,4CA8BvB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/documentation/src/components/examples.cardTab.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardTabButton, CardTabContainer } from "@components";
+import { Box } from "../ui/box";
+function CardTabExamples() {
+    return (_jsxs(Box, { title: "CardTab", children: [_jsxs(CardTabContainer, { children: [_jsx(CardTabButton, { value: "item-1", children: "Item 1" }), _jsx(CardTabButton, { value: "item-2", children: "Item 2" }), _jsx(CardTabButton, { value: "item-3", children: "Item 3" })] }), _jsxs(CardTabContainer, { defaultValue: "item-3", children: [_jsx(CardTabButton, { value: "item-1", children: "Item 1" }), _jsx(CardTabButton, { value: "item-2", children: "Item 2" }), _jsx(CardTabButton, { value: "item-3", children: "Item 3" })] }), _jsxs(CardTabContainer, { disabled: true, children: [_jsx(CardTabButton, { value: "item-1", children: "Item 1" }), _jsx(CardTabButton, { value: "item-2", children: "Item 2" }), _jsx(CardTabButton, { value: "item-3", children: "Item 3" })] }), _jsxs(CardTabContainer, { children: [_jsx(CardTabButton, { value: "item-1", children: "Item 1" }), _jsx(CardTabButton, { value: "item-2", children: "Item 2" }), _jsx(CardTabButton, { value: "item-3", disabled: true, children: "Item 3" })] })] }));
+}
+export { CardTabExamples };

package/dist/documentation/src/components/examples.checkbox.d.ts

@@ -0,0 +1,3 @@
+declare function CheckboxExamples(): import("react/jsx-runtime").JSX.Element;
+export { CheckboxExamples };
+//# sourceMappingURL=examples.checkbox.d.ts.map

package/dist/documentation/src/components/examples.checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.checkbox.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.checkbox.tsx"],"names":[],"mappings":"AAMA,iBAAS,gBAAgB,4CAqFxB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.checkbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@components";
+import { useState } from "react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function CheckboxExamples() {
+    const [isChecked, setIsChecked] = useState(false);
+    const [premiumEnabled, setPremiumEnabled] = useState(true);
+    return (_jsxs(Box, { title: "Checkbox", children: [_jsxs(Row, { children: [_jsx(Checkbox, { name: "basic1", label: "Basic checkbox" }), _jsx(Checkbox, { name: "basic2", label: "With custom value", value: "accepted" }), _jsx(Checkbox, { name: "basic3", label: "Default checked", defaultChecked: true }), _jsx(Checkbox, { name: "basic4", label: "Disabled state", disabled: true })] }), _jsxs(Row, { children: [_jsx(Checkbox, { name: "size1", label: "Small (sm)", size: "sm" }), _jsx(Checkbox, { name: "size2", label: "Medium (md) - default", size: "md" }), _jsx(Checkbox, { name: "size3", label: "Large (lg)", size: "lg" })] }), _jsxs(Row, { children: [_jsx(Checkbox, { name: "controlled1", label: "Controlled checkbox", checked: isChecked, onCheck: (value) => setIsChecked(!!value) }), _jsx(Checkbox, { name: "controlled2", label: "Premium features", checked: premiumEnabled, value: "premium", onCheck: (value) => setPremiumEnabled(!!value), size: "lg" })] }), _jsxs(Row, { children: [_jsx(Checkbox, { name: "error1", label: "With error message", errorMessage: true }), _jsx(Checkbox, { name: "error2", label: "Required field", errorMessage: true, size: "lg" })] }), _jsxs(Row, { children: [_jsx(Checkbox, { name: "terms", label: "I agree to the terms and conditions", value: "terms_accepted", onCheck: (value) => console.log("Terms:", value) }), _jsx(Checkbox, { name: "newsletter", label: "Subscribe to newsletter", value: "subscribed", defaultChecked: true, size: "sm" })] }), _jsxs(Row, { children: [_jsx(Checkbox, { name: "notifications", label: "Enable notifications", className: "custom-checkbox", onCheck: (value) => {
+                            console.log("Notifications:", value);
+                        } }), _jsx(Checkbox, { name: "remember", label: "Remember me for 30 days", value: "remember_user", size: "sm", onCheck: (value) => console.log("Remember user:", value) })] })] }));
+}
+export { CheckboxExamples };

package/dist/documentation/src/components/examples.currencyInput.d.ts

@@ -0,0 +1,3 @@
+declare function CurrencyInputExamples(): import("react/jsx-runtime").JSX.Element;
+export { CurrencyInputExamples };
+//# sourceMappingURL=examples.currencyInput.d.ts.map

package/dist/documentation/src/components/examples.currencyInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.currencyInput.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.currencyInput.tsx"],"names":[],"mappings":"AAcA,iBAAS,qBAAqB,4CAsP7B;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.currencyInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CurrencyInput } from "@components";
+import { Calculator, CreditCard, DollarSign, PiggyBank, Receipt, TrendingUp, Wallet, } from "lucide-react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function CurrencyInputExamples() {
+    return (_jsxs(Box, { title: "CurrencyInput", children: [_jsxs(Row, { children: [_jsx(CurrencyInput, { name: "variant-solid", locale: "USD", placeholder: "0.00", label: "Solid variant:" }), _jsx(CurrencyInput, { name: "variant-outline", locale: "EUR", placeholder: "0,00", label: "Outline variant:", variant: "outline" }), _jsx(CurrencyInput, { name: "variant-underline", locale: "BRL", placeholder: "0,00", label: "Underline variant:", variant: "underline" })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "size-md", locale: "USD", placeholder: "0.00", label: "Medium size:" }), _jsx(CurrencyInput, { name: "size-lg", locale: "USD", placeholder: "0.00", label: "Large size:", size: "lg" })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "left-icon", locale: "USD", placeholder: "0.00", label: "Left icon:", leftIcon: DollarSign }), _jsx(CurrencyInput, { name: "right-icon", locale: "EUR", placeholder: "0,00", label: "Right icon:", rightIcon: Calculator }), _jsx(CurrencyInput, { name: "both-icons", locale: "BRL", placeholder: "0,00", label: "Both icons:", leftIcon: Wallet, rightIcon: TrendingUp })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "prefix", locale: "USD", placeholder: "0.00", label: "With prefix:", prefix: "$" }), _jsx(CurrencyInput, { name: "suffix", locale: "EUR", placeholder: "0,00", label: "With suffix:", suffix: "EUR" }), _jsx(CurrencyInput, { name: "prefix-suffix", locale: "BRL", placeholder: "0,00", label: "Prefix and suffix:", prefix: "R$", suffix: "BRL" })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "loading-left", locale: "USD", placeholder: "Loading...", label: "Loading (left):", isLoading: true }), _jsx(CurrencyInput, { name: "loading-right", locale: "EUR", placeholder: "Loading...", label: "Loading (right):", rightIcon: Calculator, isLoading: true })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "salary", locale: "USD", placeholder: "0.00", label: "Salary:", leftIcon: DollarSign, prefix: "$" }), _jsx(CurrencyInput, { name: "price", locale: "EUR", placeholder: "0,00", label: "Product Price:", leftIcon: Receipt, variant: "outline" }), _jsx(CurrencyInput, { name: "investment", locale: "BRL", placeholder: "0,00", label: "Investment:", leftIcon: PiggyBank, variant: "underline" })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "disabled", locale: "USD", placeholder: "0.00", label: "Disabled:", disabled: true, defaultValue: 1500 }), _jsx(CurrencyInput, { name: "readonly", locale: "EUR", placeholder: "0,00", label: "Read only:", readOnly: true, value: 2500 })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "required", locale: "USD", placeholder: "0.00", label: "Required field:", showAsterisk: true, required: true }), _jsx(CurrencyInput, { name: "error", locale: "BRL", placeholder: "0,00", label: "With error:", errorMessage: "Amount must be greater than 0", leftIcon: DollarSign })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "max-value", locale: "USD", placeholder: "0.00", label: "Max $10,000:", max: 10000, leftIcon: CreditCard, variant: "outline" }), _jsx(CurrencyInput, { name: "budget", locale: "EUR", placeholder: "0,00", label: "Monthly Budget:", leftIcon: Calculator, suffix: "EUR", variant: "underline", size: "lg" })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "different-locales-1", locale: "JPY", placeholder: "\u00A50", label: "Japanese Yen:", leftIcon: DollarSign }), _jsx(CurrencyInput, { name: "different-locales-2", locale: "GBP", placeholder: "\u00A30.00", label: "British Pound:", leftIcon: DollarSign, prefix: "\u00A3" }), _jsx(CurrencyInput, { name: "different-locales-3", locale: "CAD", placeholder: "$0.00", label: "Canadian Dollar:", leftIcon: DollarSign, suffix: "CAD" })] }), _jsxs(Row, { children: [_jsx(CurrencyInput, { name: "business-revenue", locale: "USD", placeholder: "0.00", label: "Annual Revenue:", leftIcon: TrendingUp, rightIcon: DollarSign, prefix: "$", variant: "outline" }), _jsx(CurrencyInput, { name: "savings-goal", locale: "BRL", placeholder: "0,00", label: "Savings Goal:", leftIcon: PiggyBank, variant: "underline", max: 100000 })] })] }));
+}
+export { CurrencyInputExamples };

package/dist/documentation/src/components/examples.divider.d.ts

@@ -0,0 +1,3 @@
+declare function DividerExamples(): import("react/jsx-runtime").JSX.Element;
+export { DividerExamples };
+//# sourceMappingURL=examples.divider.d.ts.map

package/dist/documentation/src/components/examples.divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.divider.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.divider.tsx"],"names":[],"mappings":"AAGA,iBAAS,eAAe,4CAMvB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/documentation/src/components/examples.divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from "@components";
+import { Box } from "../ui/box";
+function DividerExamples() {
+    return (_jsx(Box, { title: "Divider", children: _jsx(Divider, {}) }));
+}
+export { DividerExamples };

package/dist/documentation/src/components/examples.drawer.d.ts

@@ -0,0 +1,3 @@
+declare function DrawerExamples(): import("react/jsx-runtime").JSX.Element;
+export { DrawerExamples };
+//# sourceMappingURL=examples.drawer.d.ts.map

package/dist/documentation/src/components/examples.drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.drawer.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.drawer.tsx"],"names":[],"mappings":"AAMA,iBAAS,cAAc,4CAkCtB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/documentation/src/components/examples.drawer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DrawerContainer, DrawerHeader } from "@components";
+import { useState } from "react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function DrawerExamples() {
+    const [leftDrawer, setLeftDrawer] = useState(false);
+    const [rightDrawer, setRightDrawer] = useState(false);
+    return (_jsx(Box, { title: "Drawer", children: _jsxs(Row, { children: [_jsx(Button, { onClick: () => setLeftDrawer(true), children: "Open left drawer" }), _jsx(Button, { onClick: () => setRightDrawer(true), children: "Open right drawer" }), _jsxs(DrawerContainer, { isVisible: leftDrawer, makeInvisible: () => setLeftDrawer(false), orientation: "left", children: [_jsx(DrawerHeader, { children: "Left drawer" }), _jsx("p", { style: { padding: "16px" }, children: "This is the content of the left drawer." })] }), _jsxs(DrawerContainer, { isVisible: rightDrawer, makeInvisible: () => setRightDrawer(false), orientation: "right", children: [_jsx(DrawerHeader, { children: "Right drawer" }), _jsx("p", { style: { padding: "16px" }, children: "This is the content of the right drawer." })] })] }) }));
+}
+export { DrawerExamples };

package/dist/documentation/src/components/examples.iconButton.d.ts

@@ -0,0 +1,3 @@
+declare function IconButtonExamples(): import("react/jsx-runtime").JSX.Element;
+export { IconButtonExamples };
+//# sourceMappingURL=examples.iconButton.d.ts.map

package/dist/documentation/src/components/examples.iconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.iconButton.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.iconButton.tsx"],"names":[],"mappings":"AAMA,iBAAS,kBAAkB,4CAqE1B;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.iconButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from "@components";
+import { Star } from "lucide-react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function IconButtonExamples() {
+    return (_jsxs(Box, { title: "IconButton", children: [_jsxs(Row, { children: [_jsx(IconButton, { "aria-label": "test", icon: Star }), _jsx(IconButton, { "aria-label": "variant - outline", icon: Star, variant: "outline" }), _jsx(IconButton, { "aria-label": "variant - ghost", icon: Star, variant: "ghost" }), _jsx(IconButton, { "aria-label": "variant - invisible", icon: Star, variant: "invisible" })] }), _jsxs(Row, { children: [_jsx(IconButton, { size: "xs", "aria-label": "size - xs", icon: Star }), _jsx(IconButton, { size: "sm", "aria-label": "size - sm", icon: Star }), _jsx(IconButton, { size: "md", "aria-label": "size - md (default)", icon: Star }), _jsx(IconButton, { size: "lg", "aria-label": "size - lg", icon: Star })] }), _jsxs(Row, { children: [_jsx(IconButton, { "aria-label": "scheme - primary (default)", icon: Star }), _jsx(IconButton, { "aria-label": "scheme - danger", icon: Star, scheme: "danger" }), _jsx(IconButton, { "aria-label": "scheme - info", icon: Star, scheme: "info" }), _jsx(IconButton, { "aria-label": "scheme - success", icon: Star, scheme: "success" }), _jsx(IconButton, { "aria-label": "scheme - warning", icon: Star, scheme: "warning" })] }), _jsxs(Row, { children: [_jsx(IconButton, { "aria-label": "isLoading - size xs", icon: Star, isLoading: true, size: "xs" }), _jsx(IconButton, { "aria-label": "isLoading - size sm", icon: Star, isLoading: true, size: "sm" }), _jsx(IconButton, { "aria-label": "isLoading - size md", icon: Star, isLoading: true, size: "md" }), _jsx(IconButton, { "aria-label": "isLoading - size lg", icon: Star, isLoading: true, size: "lg" })] })] }));
+}
+export { IconButtonExamples };

package/dist/documentation/src/components/examples.input.d.ts

@@ -0,0 +1,3 @@
+declare function InputExamples(): import("react/jsx-runtime").JSX.Element;
+export { InputExamples };
+//# sourceMappingURL=examples.input.d.ts.map

package/dist/documentation/src/components/examples.input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.input.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.input.tsx"],"names":[],"mappings":"AAsBA,iBAAS,aAAa,4CAuOrB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/documentation/src/components/examples.input.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "@components";
+import { Calendar, Clock, DollarSign, Eye, EyeOff, Globe, Hash, Lock, Mail, MapPin, Percent, Phone, Search, User, XCircle, } from "lucide-react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function InputExamples() {
+    return (_jsxs(Box, { title: "Input", children: [_jsxs(Row, { children: [_jsx(Input, { name: "variant-solid", placeholder: "Variant solid (default)", label: "Solid variant:" }), _jsx(Input, { name: "variant-outline", placeholder: "Variant outline", label: "Outline variant:", variant: "outline" }), _jsx(Input, { name: "variant-underline", placeholder: "Variant underline", label: "Underline variant:", variant: "underline" })] }), _jsxs(Row, { children: [_jsx(Input, { name: "size-md", placeholder: "Size md (default)", label: "Medium size:" }), _jsx(Input, { name: "size-lg", placeholder: "Size lg", label: "Large size:", size: "lg" })] }), _jsxs(Row, { children: [_jsx(Input, { name: "left-icon", placeholder: "With left icon", label: "Left icon:", leftIcon: Search }), _jsx(Input, { name: "right-icon", placeholder: "With right icon", label: "Right icon:", rightIcon: Eye }), _jsx(Input, { name: "both-icons", placeholder: "With both icons", label: "Both icons:", leftIcon: User, rightIcon: Lock })] }), _jsxs(Row, { children: [_jsx(Input, { name: "prefix", placeholder: "example", label: "With prefix:", prefix: "https://" }), _jsx(Input, { name: "suffix", placeholder: "website", label: "With suffix:", suffix: ".com" }), _jsx(Input, { name: "prefix-suffix", placeholder: "amount", label: "Prefix and suffix:", prefix: "$", suffix: ".00" })] }), _jsxs(Row, { children: [_jsx(Input, { name: "loading-left", placeholder: "Loading...", label: "Loading (left):", isLoading: true }), _jsx(Input, { name: "loading-right", placeholder: "Loading...", label: "Loading (right):", rightIcon: Search, isLoading: true })] }), _jsxs(Row, { children: [_jsx(Input, { name: "email", type: "email", placeholder: "your@email.com", label: "Email:", leftIcon: Mail }), _jsx(Input, { name: "password", type: "password", placeholder: "Password", label: "Password:", leftIcon: Lock, rightIcon: EyeOff }), _jsx(Input, { name: "tel", type: "tel", placeholder: "(11) 99999-9999", label: "Phone:", leftIcon: Phone })] }), _jsxs(Row, { children: [_jsx(Input, { name: "disabled", placeholder: "Disabled input", label: "Disabled:", disabled: true }), _jsx(Input, { name: "readonly", placeholder: "Read only input", label: "Read only:", readOnly: true, value: "Cannot edit" })] }), _jsxs(Row, { children: [_jsx(Input, { name: "required", placeholder: "Required field", label: "Required field:", showAsterisk: true, required: true }), _jsx(Input, { name: "error", leftIcon: XCircle, placeholder: "Field with error", label: "With error:", errorMessage: "This field is required" })] }), _jsxs(Row, { children: [_jsx(Input, { name: "search", type: "search", placeholder: "Search...", label: "Search:", leftIcon: Search }), _jsx(Input, { name: "url", type: "url", placeholder: "https://example.com", label: "Website:", leftIcon: Globe }), _jsx(Input, { name: "number", type: "number", placeholder: "123", label: "Number:", leftIcon: Hash })] }), _jsxs(Row, { children: [_jsx(Input, { name: "date", type: "date", label: "Date:", leftIcon: Calendar }), _jsx(Input, { name: "time", type: "time", label: "Time:", leftIcon: Clock }), _jsx(Input, { name: "datetime-local", type: "datetime-local", label: "Date and Time:", leftIcon: Calendar })] }), _jsxs(Row, { children: [_jsx(Input, { name: "price", type: "number", placeholder: "0.00", label: "Price:", prefix: "$", rightIcon: DollarSign, variant: "outline", size: "lg" }), _jsx(Input, { name: "percentage", type: "number", placeholder: "0", label: "Percentage:", suffix: "%", rightIcon: Percent, variant: "underline" })] }), _jsxs(Row, { children: [_jsx(Input, { name: "address", placeholder: "Street address", label: "Address:", leftIcon: MapPin, variant: "outline" }), _jsx(Input, { name: "postalCode", placeholder: "12345-678", label: "ZIP Code:", leftIcon: MapPin, maxLength: 9 })] })] }));
+}
+export { InputExamples };

package/dist/documentation/src/components/examples.maskedInput.d.ts

@@ -0,0 +1,3 @@
+declare function MaskedInputExamples(): import("react/jsx-runtime").JSX.Element;
+export { MaskedInputExamples };
+//# sourceMappingURL=examples.maskedInput.d.ts.map

package/dist/documentation/src/components/examples.maskedInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.maskedInput.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.maskedInput.tsx"],"names":[],"mappings":"AAiBA,iBAAS,mBAAmB,4CA8P3B;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.maskedInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MaskedInput } from "@components";
+import { Calendar, Clock, CreditCard, FileText, Hash, IdCard, MapPin, Phone, User, XCircle, } from "lucide-react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function MaskedInputExamples() {
+    return (_jsxs(Box, { title: "MaskedInput", children: [_jsxs(Row, { children: [_jsx(MaskedInput, { name: "variant-solid", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Solid variant (default):" }), _jsx(MaskedInput, { name: "variant-outline", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Outline variant:", variant: "outline" }), _jsx(MaskedInput, { name: "variant-underline", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Underline variant:", variant: "underline" })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "size-md", mask: "(__)_____-____", replacement: { _: /\d/ }, placeholder: "(11)99999-9999", label: "Medium size (default):" }), _jsx(MaskedInput, { name: "size-lg", mask: "(__)_____-____", replacement: { _: /\d/ }, placeholder: "(11)99999-9999", label: "Large size:", size: "lg" })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "cpf", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "CPF:", leftIcon: User }), _jsx(MaskedInput, { name: "cnpj", mask: "__.___.___/____-__", replacement: { _: /\d/ }, placeholder: "00.000.000/0000-00", label: "CNPJ:", leftIcon: FileText }), _jsx(MaskedInput, { name: "rg", mask: "__.___.__-_", replacement: { _: /\d/ }, placeholder: "00.000.00-0", label: "RG:", leftIcon: IdCard })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "phone", mask: "(__)_____-____", replacement: { _: /\d/ }, placeholder: "(11)99999-9999", label: "Telefone:", leftIcon: Phone }), _jsx(MaskedInput, { name: "cep", mask: "_____-___", replacement: { _: /\d/ }, placeholder: "00000-000", label: "CEP:", leftIcon: MapPin }), _jsx(MaskedInput, { name: "credit-card", mask: "____ ____ ____ ____", replacement: { _: /\d/ }, placeholder: "0000 0000 0000 0000", label: "Cart\u00E3o de Cr\u00E9dito:", leftIcon: CreditCard })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "date", mask: "__/__/____", replacement: { _: /\d/ }, placeholder: "dd/mm/yyyy", label: "Data:", leftIcon: Calendar }), _jsx(MaskedInput, { name: "time", mask: "__:__", replacement: { _: /\d/ }, placeholder: "00:00", label: "Hor\u00E1rio:", leftIcon: Clock }), _jsx(MaskedInput, { name: "currency", mask: "R$ ___.__,__", replacement: { _: /\d/ }, placeholder: "R$ 000.00,00", label: "Moeda:", prefix: "R$" })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "prefix-suffix", mask: "_____-___", replacement: { _: /\d/ }, placeholder: "00000-000", label: "Prefix e Suffix:", prefix: "CEP:", suffix: "-BR" }), _jsx(MaskedInput, { name: "show-mask", mask: "(__)_____-____", replacement: { _: /\d/ }, placeholder: "(11)99999-9999", label: "Show mask:", showMask: true, leftIcon: Phone })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "loading", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Loading:", isLoading: true }), _jsx(MaskedInput, { name: "loading-right", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Loading (right icon):", rightIcon: Hash, isLoading: true })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "disabled", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Disabled:", disabled: true }), _jsx(MaskedInput, { name: "readonly", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Read only:", readOnly: true, defaultValue: "123.456.789-00" })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "required", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Required field:", showAsterisk: true, required: true }), _jsx(MaskedInput, { name: "error", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "With error:", leftIcon: XCircle, errorMessage: "CPF inv\u00E1lido" })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "separate", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "Separate:", separate: true, leftIcon: User }), _jsx(MaskedInput, { name: "custom-pattern", mask: "___-###-___", replacement: { _: /\d/, "#": /[A-Z]/ }, placeholder: "000-ABC-000", label: "Custom pattern:", leftIcon: Hash })] }), _jsxs(Row, { children: [_jsx(MaskedInput, { name: "advanced-cpf", mask: "___.___.___-__", replacement: { _: /\d/ }, placeholder: "000.000.000-00", label: "CPF completo:", leftIcon: User, variant: "outline", size: "lg", showMask: true }), _jsx(MaskedInput, { name: "advanced-phone", mask: "(__)_____-____", replacement: { _: /\d/ }, placeholder: "(11)99999-9999", label: "Telefone completo:", leftIcon: Phone, variant: "underline" })] })] }));
+}
+export { MaskedInputExamples };

package/dist/documentation/src/components/examples.modal.d.ts

@@ -0,0 +1,3 @@
+declare function ModalExamples(): import("react/jsx-runtime").JSX.Element;
+export { ModalExamples };
+//# sourceMappingURL=examples.modal.d.ts.map

package/dist/documentation/src/components/examples.modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.modal.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.modal.tsx"],"names":[],"mappings":"AAMA,iBAAS,aAAa,4CAsBrB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/documentation/src/components/examples.modal.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ModalContainer, ModalFooter, ModalHeader } from "@components";
+import { useState } from "react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function ModalExamples() {
+    const [modal, setModal] = useState(false);
+    return (_jsx(Box, { title: "Modal", children: _jsxs(Row, { children: [_jsx(Button, { onClick: () => setModal(true), children: "Open modal" }), _jsxs(ModalContainer, { isVisible: modal, makeInvisible: () => setModal(false), children: [_jsx(ModalHeader, { children: "Modal" }), _jsx("p", { style: { padding: "16px", minWidth: "400px" }, children: "This is the content of the right drawer." }), _jsx(ModalFooter, { children: _jsx(Button, { scheme: "danger", onClick: () => setModal(false), children: "Close modal" }) })] })] }) }));
+}
+export { ModalExamples };

package/dist/documentation/src/components/examples.multiSelect.d.ts

@@ -0,0 +1,3 @@
+declare function MultiSelectExamples(): import("react/jsx-runtime").JSX.Element;
+export { MultiSelectExamples };
+//# sourceMappingURL=examples.multiSelect.d.ts.map

package/dist/documentation/src/components/examples.multiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.multiSelect.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.multiSelect.tsx"],"names":[],"mappings":"AAgGA,iBAAS,mBAAmB,4CA6N3B;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.multiSelect.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MultiSelect } from "@components";
+import { Globe, Hash, Search, Tag, Users, MapPin, Code, Building, Heart, Palette, } from "lucide-react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+// Sample data for examples
+const basicOptions = [
+    { label: "Opção 1", value: "option1" },
+    { label: "Opção 2", value: "option2" },
+    { label: "Opção 3", value: "option3" },
+    { label: "Opção 4", value: "option4" },
+];
+const categoriesOptions = [
+    { label: "Tecnologia", value: "tech" },
+    { label: "Design", value: "design" },
+    { label: "Marketing", value: "marketing" },
+    { label: "Vendas", value: "sales" },
+    { label: "Recursos Humanos", value: "hr" },
+    { label: "Financeiro", value: "finance" },
+];
+const countriesOptions = [
+    { label: "Brasil", value: "br" },
+    { label: "Estados Unidos", value: "us" },
+    { label: "Reino Unido", value: "uk" },
+    { label: "França", value: "fr" },
+    { label: "Alemanha", value: "de" },
+    { label: "Japão", value: "jp" },
+    { label: "Canadá", value: "ca" },
+    { label: "Austrália", value: "au" },
+];
+const skillsOptions = [
+    { label: "JavaScript", value: "javascript" },
+    { label: "TypeScript", value: "typescript" },
+    { label: "React", value: "react" },
+    { label: "Node.js", value: "nodejs" },
+    { label: "Python", value: "python" },
+    { label: "Java", value: "java" },
+    { label: "C#", value: "csharp" },
+    { label: "PHP", value: "php" },
+    { label: "Go", value: "go" },
+    { label: "Rust", value: "rust" },
+];
+const tagsOptions = [
+    { label: "Urgente", value: "urgent" },
+    { label: "Importante", value: "important" },
+    { label: "Baixa Prioridade", value: "low" },
+    { label: "Em Progresso", value: "progress" },
+    { label: "Concluído", value: "done" },
+    { label: "Revisão", value: "review" },
+];
+const departmentsOptions = [
+    { label: "Desenvolvimento", value: "dev" },
+    { label: "Design", value: "design" },
+    { label: "Marketing", value: "marketing" },
+    { label: "Vendas", value: "sales" },
+    { label: "Suporte", value: "support" },
+    { label: "Administração", value: "admin" },
+];
+const hobbiesOptions = [
+    { label: "Leitura", value: "reading" },
+    { label: "Música", value: "music" },
+    { label: "Fotografia", value: "photography" },
+    { label: "Culinária", value: "cooking" },
+    { label: "Games", value: "gaming" },
+    { label: "Esportes", value: "sports" },
+    { label: "Viagem", value: "travel" },
+    { label: "Arte", value: "art" },
+];
+function MultiSelectExamples() {
+    return (_jsxs(Box, { title: "MultiSelect", children: [_jsxs(Row, { children: [_jsx(MultiSelect, { name: "variant-solid", options: basicOptions, placeholder: "Variant solid (default)", label: "Solid variant:" }), _jsx(MultiSelect, { name: "variant-outline", options: basicOptions, placeholder: "Variant outline", label: "Outline variant:", variant: "outline" }), _jsx(MultiSelect, { name: "variant-underline", options: basicOptions, placeholder: "Variant underline", label: "Underline variant:", variant: "underline" })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "size-md", options: basicOptions, placeholder: "Size md (default)", label: "Medium size:" }), _jsx(MultiSelect, { name: "size-lg", options: basicOptions, placeholder: "Size lg", label: "Large size:", size: "lg" })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "left-icon", options: categoriesOptions, placeholder: "Selecione categorias", label: "Left icon:", leftIcon: Tag }), _jsx(MultiSelect, { name: "prefix", options: countriesOptions, placeholder: "Selecione pa\u00EDses", label: "With prefix:", prefix: "Pa\u00EDs:" }), _jsx(MultiSelect, { name: "prefix-icon", options: countriesOptions, placeholder: "Selecione pa\u00EDses", label: "Prefix and icon:", prefix: "Loc:", leftIcon: Globe })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "searchable", options: skillsOptions, placeholder: "Busque e selecione habilidades", label: "Searchable:", leftIcon: Search, isSearchable: true }), _jsx(MultiSelect, { name: "close-on-select", options: tagsOptions, placeholder: "Selecione tags", label: "Close on select:", leftIcon: Hash, closeOnSelect: true })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "loading", options: categoriesOptions, placeholder: "Carregando...", label: "Loading state:", isLoading: true }), _jsx(MultiSelect, { name: "loading-with-icon", options: skillsOptions, placeholder: "Carregando habilidades...", label: "Loading with icon:", leftIcon: Code, isLoading: true })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "disabled", options: basicOptions, placeholder: "MultiSelect desabilitado", label: "Disabled:", disabled: true }), _jsx(MultiSelect, { name: "readonly", options: departmentsOptions, placeholder: "MultiSelect apenas leitura", label: "Read only:", readOnly: true, defaultValue: ["dev", "design"] })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "required", options: categoriesOptions, placeholder: "Campo obrigat\u00F3rio", label: "Required field:", showAsterisk: true }), _jsx(MultiSelect, { name: "error", options: skillsOptions, placeholder: "Campo com erro", label: "With error:", errorMessage: "Selecione pelo menos uma habilidade" })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "default-values", options: hobbiesOptions, placeholder: "Selecione hobbies", label: "With default values:", leftIcon: Heart, defaultValue: ["reading", "music"] }), _jsx(MultiSelect, { name: "custom-not-found", options: [], placeholder: "Sem op\u00E7\u00F5es", label: "Empty options:", notFoundText: "Nenhuma op\u00E7\u00E3o dispon\u00EDvel no momento" })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "departments", options: departmentsOptions, placeholder: "Selecione departamentos", label: "Departments:", leftIcon: Building, variant: "outline", size: "lg", isSearchable: true, closeOnSelect: false }), _jsx(MultiSelect, { name: "team-roles", options: [
+                            { label: "Frontend Developer", value: "frontend" },
+                            { label: "Backend Developer", value: "backend" },
+                            { label: "Full Stack Developer", value: "fullstack" },
+                            { label: "DevOps Engineer", value: "devops" },
+                            { label: "QA Engineer", value: "qa" },
+                            { label: "Product Manager", value: "pm" },
+                        ], placeholder: "Selecione fun\u00E7\u00F5es", label: "Team roles:", leftIcon: Users, variant: "underline" })] }), _jsxs(Row, { children: [_jsx(MultiSelect, { name: "creative-areas", options: [
+                            { label: "Design Gráfico", value: "graphic" },
+                            { label: "UI/UX Design", value: "uiux" },
+                            { label: "Ilustração", value: "illustration" },
+                            { label: "Animação", value: "animation" },
+                            { label: "Branding", value: "branding" },
+                            { label: "Motion Graphics", value: "motion" },
+                        ], placeholder: "\u00C1reas criativas", label: "Creative areas:", leftIcon: Palette, isSearchable: true, notFoundText: "\u00C1rea n\u00E3o encontrada" }), _jsx(MultiSelect, { name: "work-locations", options: [
+                            { label: "São Paulo - SP", value: "sp" },
+                            { label: "Rio de Janeiro - RJ", value: "rj" },
+                            { label: "Belo Horizonte - MG", value: "mg" },
+                            { label: "Remote", value: "remote" },
+                            { label: "Híbrido", value: "hybrid" },
+                        ], placeholder: "Locais de trabalho", label: "Work locations:", leftIcon: MapPin, closeOnSelect: true, variant: "outline" })] })] }));
+}
+export { MultiSelectExamples };

package/dist/documentation/src/components/examples.phoneInput.d.ts

@@ -0,0 +1,3 @@
+declare function PhoneInputExamples(): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputExamples };
+//# sourceMappingURL=examples.phoneInput.d.ts.map

package/dist/documentation/src/components/examples.phoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.phoneInput.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.phoneInput.tsx"],"names":[],"mappings":"AAMA,iBAAS,kBAAkB,4CA6P1B;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.phoneInput.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PhoneInput } from "@components";
+import { useState } from "react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function PhoneInputExamples() {
+    const [contactPhone, setContactPhone] = useState("");
+    const [businessPhone, setBusinessPhone] = useState("");
+    const [emergencyPhone, setEmergencyPhone] = useState("");
+    return (_jsxs(Box, { title: "PhoneInput", children: [_jsxs(Row, { children: [_jsx(PhoneInput, { name: "basic" }), _jsx(PhoneInput, { name: "with-label", label: "Phone Number" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "size-md", label: "Medium Size (default)", size: "md", variant: "solid" }), _jsx(PhoneInput, { name: "size-lg", label: "Large Size", size: "lg", variant: "outline" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "us-phone", label: "US Phone", defaultCountry: "US" }), _jsx(PhoneInput, { name: "br-phone", label: "Brasil Phone", defaultCountry: "BR" }), _jsx(PhoneInput, { name: "uk-phone", label: "UK Phone", defaultCountry: "GB" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "us-default", label: "US Number with Default", defaultCountry: "US", defaultValue: "+1 (555) 123-4567" }), _jsx(PhoneInput, { name: "br-default", label: "BR Number with Default", defaultCountry: "BR", defaultValue: "+55 11 99999-9999" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "required-phone", label: "Contact Phone", showAsterisk: true, defaultCountry: "US" }), _jsx(PhoneInput, { name: "error-phone", label: "Phone with Error", errorMessage: "Please enter a valid phone number", defaultCountry: "CA" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "controlled-contact", label: "Contact Phone", onChange: (value) => {
+                            setContactPhone(value);
+                            console.log("Contact phone:", value);
+                        }, defaultCountry: "US", showAsterisk: true }), _jsx(PhoneInput, { name: "controlled-business", label: "Business Phone", onChange: (value) => {
+                            setBusinessPhone(value);
+                            console.log("Business phone:", value);
+                        }, defaultCountry: "BR", size: "lg" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "custom-text-en", label: "Phone (English)", searchCountryPlaceholder: "Search country...", notFoundCountryText: "Country not found", defaultCountry: "GB" }), _jsx(PhoneInput, { name: "custom-text-pt", label: "Telefone (Portugu\u00EAs)", searchCountryPlaceholder: "Pesquisar pa\u00EDs...", notFoundCountryText: "Nenhum pa\u00EDs encontrado", defaultCountry: "BR" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "disabled-phone", label: "Disabled Phone", defaultValue: "+1 (555) 987-6543", defaultCountry: "US", disabled: true }), _jsx(PhoneInput, { name: "readonly-phone", label: "Read Only Phone", defaultValue: "+55 21 98765-4321", defaultCountry: "BR", readOnly: true })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "loading-phone", label: "Loading Phone", isLoading: true, defaultCountry: "CA" }), _jsx(PhoneInput, { name: "loading-large", label: "Loading Large", isLoading: true, size: "lg", variant: "outline", defaultCountry: "AU" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "france-phone", label: "France Phone", defaultCountry: "FR", variant: "outline" }), _jsx(PhoneInput, { name: "japan-phone", label: "Japan Phone", defaultCountry: "JP", variant: "outline" }), _jsx(PhoneInput, { name: "germany-phone", label: "Germany Phone", defaultCountry: "DE", variant: "outline" })] }), _jsx(Row, { children: _jsxs("div", { style: {
+                        padding: "20px",
+                        border: "1px solid #e2e8f0",
+                        borderRadius: "8px",
+                        width: "100%",
+                    }, children: [_jsx("h4", { style: { margin: "0 0 16px 0" }, children: "Contact Information" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [_jsx(PhoneInput, { name: "primary-phone", label: "Primary Phone", showAsterisk: true, defaultCountry: "US", onChange: (value) => console.log("Primary:", value) }), _jsx(PhoneInput, { name: "secondary-phone", label: "Secondary Phone (Optional)", defaultCountry: "US", onChange: (value) => console.log("Secondary:", value) }), _jsx(PhoneInput, { name: "emergency-contact", label: "Emergency Contact", showAsterisk: true, defaultCountry: "US", onChange: (value) => {
+                                        setEmergencyPhone(value);
+                                        console.log("Emergency:", value);
+                                    }, size: "lg" })] })] }) }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "customer-service", label: "Customer Service", defaultValue: "+1 (800) 123-4567", defaultCountry: "US", readOnly: true, variant: "outline" }), _jsx(PhoneInput, { name: "sales-team", label: "Sales Team", defaultCountry: "US", searchCountryPlaceholder: "Find country...", className: "sales-phone" })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "mobile-number", label: "Mobile Number", defaultCountry: "BR", showAsterisk: true, onChange: (value) => console.log("Mobile:", value) }), _jsx(PhoneInput, { name: "whatsapp-number", label: "WhatsApp Number", defaultCountry: "BR", variant: "outline", onChange: (value) => console.log("WhatsApp:", value) })] }), _jsxs(Row, { children: [_jsx(PhoneInput, { name: "asia-phone", label: "Asia Pacific", defaultCountry: "SG" }), _jsx(PhoneInput, { name: "europe-phone", label: "European Union", defaultCountry: "IT" }), _jsx(PhoneInput, { name: "americas-phone", label: "Americas", defaultCountry: "MX" })] })] }));
+}
+export { PhoneInputExamples };

package/dist/documentation/src/components/examples.radio.d.ts

@@ -0,0 +1,3 @@
+declare function RadioExamples(): import("react/jsx-runtime").JSX.Element;
+export { RadioExamples };
+//# sourceMappingURL=examples.radio.d.ts.map

package/dist/documentation/src/components/examples.radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.radio.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.radio.tsx"],"names":[],"mappings":"AAKA,iBAAS,aAAa,4CA6IrB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/documentation/src/components/examples.radio.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioBox, RadioGroup } from "@components";
+import { useState } from "react";
+import { Box } from "../ui/box";
+function RadioExamples() {
+    const [selectedGender, setSelectedGender] = useState("");
+    const [selectedPlan, setSelectedPlan] = useState("basic");
+    const [selectedTheme, setSelectedTheme] = useState("light");
+    return (_jsxs(Box, { title: "Radio", children: [_jsxs(RadioGroup, { name: "gender1", label: "Gender", children: [_jsx(RadioBox, { value: "male", children: "Male" }), _jsx(RadioBox, { value: "female", children: "Female" }), _jsx(RadioBox, { value: "other", children: "Other" })] }), _jsxs(RadioGroup, { name: "newsletter", label: "Newsletter Subscription", children: [_jsx(RadioBox, { value: "yes", children: "Yes, send me updates" }), _jsx(RadioBox, { value: "no", children: "No, thank you" })] }), _jsxs(RadioGroup, { name: "size_sm", label: "Small Size", size: "sm", children: [_jsx(RadioBox, { value: "option1", children: "Option 1" }), _jsx(RadioBox, { value: "option2", children: "Option 2" })] }), _jsxs(RadioGroup, { name: "size_md", label: "Medium Size (default)", size: "md", children: [_jsx(RadioBox, { value: "option1", children: "Option 1" }), _jsx(RadioBox, { value: "option2", children: "Option 2" })] }), _jsxs(RadioGroup, { name: "size_lg", label: "Large Size", size: "lg", children: [_jsx(RadioBox, { value: "option1", children: "Option 1" }), _jsx(RadioBox, { value: "option2", children: "Option 2" })] }), _jsxs(RadioGroup, { name: "controlled_gender", label: "Controlled Gender Selection", value: selectedGender, onChange: (value) => setSelectedGender(value), children: [_jsx(RadioBox, { value: "male", children: "Male" }), _jsx(RadioBox, { value: "female", children: "Female" }), _jsx(RadioBox, { value: "other", children: "Other" })] }), _jsxs(RadioGroup, { name: "controlled_plan", label: "Subscription Plan", value: selectedPlan, onChange: (value) => setSelectedPlan(value), showAsterisk: true, children: [_jsx(RadioBox, { value: "basic", children: "Basic ($9.99/month)" }), _jsx(RadioBox, { value: "premium", children: "Premium ($19.99/month)" }), _jsx(RadioBox, { value: "enterprise", children: "Enterprise ($49.99/month)" })] }), _jsxs(RadioGroup, { name: "language", label: "Preferred Language", defaultValue: "en", children: [_jsx(RadioBox, { value: "en", children: "English" }), _jsx(RadioBox, { value: "es", children: "Spanish" }), _jsx(RadioBox, { value: "fr", children: "French" }), _jsx(RadioBox, { value: "pt", children: "Portuguese" })] }), _jsxs(RadioGroup, { name: "priority_error", label: "Priority Level", errorMessage: "Please select a priority level", showAsterisk: true, children: [_jsx(RadioBox, { value: "low", children: "Low Priority" }), _jsx(RadioBox, { value: "medium", children: "Medium Priority" }), _jsx(RadioBox, { value: "high", children: "High Priority" })] }), _jsxs(RadioGroup, { name: "theme_selection", label: "Theme Selection", value: selectedTheme, onChange: (value) => setSelectedTheme(value), children: [_jsx(RadioBox, { value: "light", children: _jsxs("div", { children: [_jsx("strong", { children: "\uD83C\uDF1E Light Theme" }), _jsx("p", { style: { margin: 0, fontSize: "0.875rem", color: "#666" }, children: "Clean and bright interface" })] }) }), _jsx(RadioBox, { value: "dark", children: _jsxs("div", { children: [_jsx("strong", { children: "\uD83C\uDF19 Dark Theme" }), _jsx("p", { style: { margin: 0, fontSize: "0.875rem", color: "#666" }, children: "Easy on the eyes" })] }) }), _jsx(RadioBox, { value: "auto", children: _jsxs("div", { children: [_jsx("strong", { children: "\uD83D\uDD04 Auto Theme" }), _jsx("p", { style: { margin: 0, fontSize: "0.875rem", color: "#666" }, children: "Follows system preference" })] }) })] }), _jsxs(RadioGroup, { name: "availability", label: "Availability Status", children: [_jsx(RadioBox, { value: "available", children: "Available" }), _jsx(RadioBox, { value: "busy", children: "Busy" }), _jsx(RadioBox, { value: "offline", disabled: true, children: "Offline (Maintenance)" })] }), _jsxs(RadioGroup, { name: "notification_type", label: "Notification Preferences", children: [_jsx(RadioBox, { value: "all", size: "lg", children: "All Notifications" }), _jsx(RadioBox, { value: "important", children: "Important Only" }), _jsx(RadioBox, { value: "none", size: "sm", children: "None" })] }), _jsxs(RadioGroup, { name: "difficulty", label: "Game Difficulty", onChange: (value) => console.log("Selected difficulty:", value), children: [_jsx(RadioBox, { value: "easy", children: _jsx("span", { style: { color: "#22c55e" }, children: "\uD83D\uDFE2 Easy" }) }), _jsx(RadioBox, { value: "medium", children: _jsx("span", { style: { color: "#f59e0b" }, children: "\uD83D\uDFE1 Medium" }) }), _jsx(RadioBox, { value: "hard", children: _jsx("span", { style: { color: "#ef4444" }, children: "\uD83D\uDD34 Hard" }) })] })] }));
+}
+export { RadioExamples };

package/dist/documentation/src/components/examples.slider.d.ts

@@ -0,0 +1,3 @@
+declare function SliderExamples(): import("react/jsx-runtime").JSX.Element;
+export { SliderExamples };
+//# sourceMappingURL=examples.slider.d.ts.map

package/dist/documentation/src/components/examples.slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.slider.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.slider.tsx"],"names":[],"mappings":"AAIA,iBAAS,cAAc,4CAqBtB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/documentation/src/components/examples.slider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider, useSlider } from "@components";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function SliderExamples() {
+    const [sliderValue, changeSliderValue] = useSlider();
+    const [disabledSliderValue, changeDisabledSliderValue] = useSlider(50);
+    return (_jsxs(Box, { title: "Slider", children: [_jsxs(Row, { children: [_jsx(Slider, { onChange: changeSliderValue, value: sliderValue }), _jsx("p", { children: sliderValue })] }), _jsxs(Row, { children: [_jsx(Slider, { disabled: true, onChange: changeDisabledSliderValue, value: disabledSliderValue }), _jsx("p", { children: disabledSliderValue })] })] }));
+}
+export { SliderExamples };