@infonomic/uikit 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Infonomic Company Limited.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/@types/shared.d.ts

@@ -0,0 +1,9 @@
+export declare const size: readonly ["xs", "sm", "md", "lg", "xl"];
+export type Size = (typeof size)[number];
+export declare const intent: readonly ["primary", "secondary", "noeffect", "success", "info", "warning", "danger"];
+export type Intent = (typeof intent)[number];
+export declare const icons: readonly ["success", "info", "success", "warning", "danger"];
+export type Icons = (typeof icons)[number];
+export declare const position: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+export type Position = (typeof position)[number];
+//# sourceMappingURL=shared.d.ts.map

package/dist/components/@types/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/components/@types/shared.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,yCAA0C,CAAA;AAC3D,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC,eAAO,MAAM,MAAM,uFAQT,CAAA;AAEV,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;AAE5C,eAAO,MAAM,KAAK,8DAA+D,CAAA;AACjF,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1C,eAAO,MAAM,QAAQ,mEAAoE,CAAA;AACzF,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA"}

package/dist/components/@types/shared.js

@@ -0,0 +1,30 @@
+const size = [
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl'
+];
+const intent = [
+    'primary',
+    'secondary',
+    'noeffect',
+    'success',
+    'info',
+    'warning',
+    'danger'
+];
+const icons = [
+    'success',
+    'info',
+    'success',
+    'warning',
+    'danger'
+];
+const position = [
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right'
+];
+export { icons, intent, position, size };

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

@@ -0,0 +1,32 @@
+/**
+ * NOTE: An accordion can be used in a variety of ways, including
+ * simple FAQs, complex navigation, and more. As such, we minimally
+ * style the accordion here in order to provide a base for customization.
+ */
+import type React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+export type AccordionRootElement = React.ComponentRef<'div'>;
+export type AccordionItemElement = React.ComponentRef<'div'>;
+export type AccordionHeaderElement = React.ComponentRef<'h2'>;
+export type AccordionTriggerElement = React.ComponentRef<'button'>;
+export type AccordionContentElement = React.ComponentRef<'div'>;
+export declare const Accordion: {
+    Root: ({ children, className, ref, ...props }: {
+        children: React.ReactNode;
+        className?: string;
+        ref?: React.RefObject<AccordionRootElement>;
+    } & (AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps)) => React.JSX.Element;
+    Item: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionItemProps & {
+        ref?: React.RefObject<AccordionItemElement>;
+    }) => React.JSX.Element;
+    Header: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionHeaderProps & {
+        ref?: React.RefObject<AccordionHeaderElement>;
+    }) => React.JSX.Element;
+    Trigger: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionTriggerProps & {
+        ref?: React.RefObject<AccordionTriggerElement>;
+    }) => React.JSX.Element;
+    Content: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionContentProps & {
+        ref?: React.RefObject<AccordionContentElement>;
+    }) => React.JSX.Element;
+};
+//# 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":"AACA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAM1D,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAmB5D,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAgB5D,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAgB7D,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;AAgBlE,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAgB/D,eAAO,MAAM,SAAS;mDA5EnB;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C,GAAG,CAAC,kBAAkB,CAAC,oBAAoB,GAAG,kBAAkB,CAAC,sBAAsB,CAAC;mDActF,kBAAkB,CAAC,kBAAkB,GAAG;QACzC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C;qDAcE,kBAAkB,CAAC,oBAAoB,GAAG;QAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAA;KAC9C;sDAcE,kBAAkB,CAAC,qBAAqB,GAAG;QAC5C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C;sDAcE,kBAAkB,CAAC,qBAAqB,GAAG;QAC5C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C;CAcA,CAAA"}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,51 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { Accordion } from "radix-ui";
+import classnames from "classnames";
+import accordion_module from "./accordion.module.js";
+const Root = ({ children, className, ref, ...props })=>/*#__PURE__*/ jsx(Accordion.Root, {
+        ref: ref,
+        className: className,
+        ...props,
+        children: children
+    });
+const Item = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Item, {
+        className: className,
+        ...props,
+        ref: ref,
+        children: children
+    });
+};
+const Header = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Header, {
+        className: classnames(accordion_module.header, className),
+        ...props,
+        ref: ref,
+        children: children
+    });
+};
+const Trigger = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Trigger, {
+        ref: ref,
+        className: classnames(accordion_module.trigger, className),
+        ...props,
+        children: children
+    });
+};
+const Content = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Content, {
+        className: classnames(accordion_module.content, className),
+        ...props,
+        ref: ref,
+        children: children
+    });
+};
+const accordion_Accordion = {
+    Root,
+    Item,
+    Header,
+    Trigger,
+    Content
+};
+export { accordion_Accordion as Accordion };

package/dist/components/accordion/accordion.module.js

@@ -0,0 +1,11 @@
+import "./accordion_module.css";
+const accordion_module = {
+    root: "root-YYzqsy",
+    item: "item-iZzmBc",
+    header: "header-MBm53y",
+    trigger: "trigger-CJlwli",
+    content: "content-KoW8ID",
+    accordionSlideDown: "accordionSlideDown-gllXUs",
+    accordionSlideUp: "accordionSlideUp-mpDLB0"
+};
+export { accordion_module as default };

package/dist/components/accordion/accordion_module.css

@@ -0,0 +1,60 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme;
+
+@layer infonomic-components {
+  .root-YYzqsy {
+    background-color: var(--canvas-25);
+    width: 300px;
+    box-shadow: var(--shadow-md);
+    border-radius: 6px;
+  }
+
+  .item-iZzmBc {
+    margin-top: 1px;
+    overflow: hidden;
+  }
+
+  .header-MBm53y {
+    margin: 0;
+    display: flex;
+  }
+
+  .trigger-CJlwli {
+    cursor: pointer;
+    align-items: center;
+    width: 100%;
+    display: flex;
+  }
+
+  .content-KoW8ID {
+    overflow: hidden;
+  }
+
+  .content-KoW8ID[data-state="open"] {
+    animation: .3s cubic-bezier(.87, 0, .13, 1) accordionSlideDown-gllXUs;
+  }
+
+  .content-KoW8ID[data-state="closed"] {
+    animation: .3s cubic-bezier(.87, 0, .13, 1) accordionSlideUp-mpDLB0;
+  }
+
+  @keyframes accordionSlideDown-gllXUs {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordionSlideUp-mpDLB0 {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+}
+

package/dist/components/animation/fade-in-lift.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+interface FadeInLiftProps<T extends ElementType> {
+    as?: T;
+    children: React.ReactNode;
+    duration?: number;
+    delay?: number;
+    className?: string;
+}
+export declare const FadeInLift: <T extends ElementType = "div">({ as, children, className, duration, delay, ...rest }: FadeInLiftProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FadeInLiftProps<T>>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=fade-in-lift.d.ts.map

package/dist/components/animation/fade-in-lift.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade-in-lift.d.ts","sourceRoot":"","sources":["../../../src/components/animation/fade-in-lift.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAKlE,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW;IAC7C,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,uDAOvD,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC,CAAC,sBAkBlF,CAAA"}

package/dist/components/animation/fade-in-lift.js

@@ -0,0 +1,27 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+const FadeInLift = ({ as, children, className, duration = 0.5, delay = 0, ...rest })=>{
+    const Component = as ? motion(as) : motion.div;
+    return /*#__PURE__*/ jsx(Component, {
+        className: className,
+        initial: {
+            opacity: 0,
+            y: 30
+        },
+        whileInView: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                duration,
+                delay
+            }
+        },
+        viewport: {
+            once: true
+        },
+        ...rest,
+        children: children
+    });
+};
+export { FadeInLift };

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const Avatar: () => React.JSX.Element;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,eAAO,MAAM,MAAM,QAAO,KAAK,CAAC,GAAG,CAAC,OASnC,CAAA"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,24 @@
+'use client'
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "radix-ui";
+import avatar_module from "./avatar.module.js";
+const url = 'https://picsum.photos/150';
+const avatar_Avatar = ()=>/*#__PURE__*/ jsxs(Avatar.Root, {
+        className: avatar_module["avatar-root"],
+        children: [
+            /*#__PURE__*/ jsx(Avatar.Image, {
+                src: url,
+                alt: "Avatar",
+                className: avatar_module["avatar-image"]
+            }),
+            /*#__PURE__*/ jsx(Avatar.Fallback, {
+                className: avatar_module["avatar-fallback"],
+                delayMs: 600,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: avatar_module["avatar-text"],
+                    children: "AB"
+                })
+            })
+        ]
+    });
+export { avatar_Avatar as Avatar };

package/dist/components/avatar/avatar.module.js

@@ -0,0 +1,12 @@
+import "./avatar_module.css";
+const avatar_module = {
+    "avatar-root": "avatar-root-WYOuF_",
+    avatarRoot: "avatar-root-WYOuF_",
+    "avatar-image": "avatar-image-eGBbhF",
+    avatarImage: "avatar-image-eGBbhF",
+    "avatar-fallback": "avatar-fallback-LnFLNm",
+    avatarFallback: "avatar-fallback-LnFLNm",
+    "avatar-text": "avatar-text-Xf0G6q",
+    avatarText: "avatar-text-Xf0G6q"
+};
+export { avatar_module as default };

package/dist/components/avatar/avatar_module.css

@@ -0,0 +1,44 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .avatar-root-WYOuF_ {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .avatar-image-eGBbhF {
+    object-fit: cover;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+  }
+
+  .avatar-fallback-LnFLNm {
+    background-color: var(--color-white);
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+
+  .avatar-text-Xf0G6q {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    text-transform: uppercase;
+    color: var(--gray-700);
+  }
+
+  .dark .avatar-fallback-LnFLNm {
+    background-color: var(--gray-800);
+  }
+
+  .dark .avatar-text-Xf0G6q {
+    color: var(--gray-400);
+  }
+}
+

package/dist/components/button/@types/button.d.ts

@@ -0,0 +1,12 @@
+import type { Intent as t } from '../../@types/shared.js';
+import type { Size as s } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for Button and IconButton component.
+ */
+export declare const variant: readonly ["filled", "outlined", "gradient", "text"];
+export type Variant = (typeof variant)[number];
+export type Size = 'md' | s;
+export type Intent = 'primary' | t;
+export type FullWidth = boolean;
+export type EnableRipple = boolean;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/@types/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/@types/button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEvD;;GAEG;AAGH,eAAO,MAAM,OAAO,qDAAsD,CAAA;AAC1E,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAA;AAC3B,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,OAAO,CAAA;AAC/B,MAAM,MAAM,YAAY,GAAG,OAAO,CAAA"}

package/dist/components/button/@types/button.js

@@ -0,0 +1,7 @@
+const variant = [
+    'filled',
+    'outlined',
+    'gradient',
+    'text'
+];
+export { variant };

package/dist/components/button/button-group.d.ts

@@ -0,0 +1,37 @@
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+import React, { type Ref, type ComponentPropsWithoutRef } from 'react';
+import type { EnableRipple, Intent, Size, Variant } from './@types/button';
+interface ButtonGroupContextType {
+    variant?: Variant;
+    size?: Size;
+    ripple?: EnableRipple;
+    expandToFit?: boolean;
+    active?: Intent;
+    inactive?: Intent;
+    value?: string | string[];
+}
+type ToggleGroupRootProps = ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;
+type SingleToggleGroupProps = Omit<ToggleGroupRootProps, 'type' | 'value' | 'onValueChange'> & {
+    type: 'single';
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+type MultipleToggleGroupProps = Omit<ToggleGroupRootProps, 'type' | 'value' | 'onValueChange'> & {
+    type: 'multiple';
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type ButtonGroupProps = (SingleToggleGroupProps | MultipleToggleGroupProps) & {
+    onValueChange?: (value: string | string[]) => void;
+    ref?: Ref<HTMLDivElement>;
+} & ButtonGroupContextType;
+declare const ButtonGroup: ({ className, variant, size, ripple, expandToFit, active, inactive, type, onValueChange, value, defaultValue, children, ref, ...props }: ButtonGroupProps) => React.JSX.Element;
+type ButtonGroupItemProps = ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & {
+    ref?: Ref<HTMLButtonElement>;
+} & ButtonGroupContextType;
+declare const ButtonGroupItem: {
+    ({ className, children, value, ref, ...props }: ButtonGroupItemProps): React.JSX.Element;
+    displayName: string | undefined;
+};
+export { ButtonGroup, ButtonGroupItem };
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/button/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,KAAK,wBAAwB,EAAY,MAAM,OAAO,CAAA;AAIhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAK1E,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAWD,KAAK,oBAAoB,GAAG,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAGtF,KAAK,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC7F,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,wBAAwB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC/F,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,GAAG,sBAAsB,CAAA;AAG1B,QAAA,MAAM,WAAW,GAAI,wIAelB,gBAAgB,sBAiClB,CAAA;AAID,KAAK,oBAAoB,GAAG,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG;IACvF,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,GAAG,sBAAsB,CAAA;AAE1B,QAAA,MAAM,eAAe;oDAAmD,oBAAoB;;CAoB3F,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/button/button-group.js

@@ -0,0 +1,81 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup } from "radix-ui";
+import react from "react";
+import classnames from "classnames";
+import { Button } from "./button.js";
+import button_group_module from "./button-group.module.js";
+const ButtonGroupContext = /*#__PURE__*/ react.createContext({
+    size: 'md',
+    variant: 'filled',
+    ripple: true,
+    expandToFit: false,
+    active: 'primary',
+    inactive: 'noeffect'
+});
+const ButtonGroup = ({ className, variant = 'filled', size = 'md', ripple = true, expandToFit = false, active = 'primary', inactive = 'noeffect', type, onValueChange, value, defaultValue, children, ref, ...props })=>{
+    if ('multiple' === type) return /*#__PURE__*/ jsx(ToggleGroup.Root, {
+        type: "multiple",
+        defaultValue: defaultValue,
+        value: value,
+        ref: ref,
+        onValueChange: onValueChange,
+        className: classnames(button_group_module["button-group"], className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ButtonGroupContext, {
+            value: {
+                variant,
+                size,
+                ripple,
+                expandToFit,
+                active,
+                inactive,
+                value
+            },
+            children: children
+        })
+    });
+    return /*#__PURE__*/ jsx(ToggleGroup.Root, {
+        type: "single",
+        value: value,
+        defaultValue: defaultValue,
+        ref: ref,
+        onValueChange: onValueChange,
+        className: classnames(button_group_module["button-group"], className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ButtonGroupContext, {
+            value: {
+                variant,
+                size,
+                ripple,
+                expandToFit,
+                active,
+                inactive,
+                value
+            },
+            children: children
+        })
+    });
+};
+ButtonGroupContext.displayName = ToggleGroup.Root.displayName;
+const ButtonGroupItem = ({ className, children, value, ref, ...props })=>{
+    const context = react.useContext(ButtonGroupContext);
+    const active = Array.isArray(context.value) ? context.value.includes(value) : context.value === value;
+    return /*#__PURE__*/ jsx(ToggleGroup.Item, {
+        asChild: true,
+        value: value,
+        ref: ref,
+        ...props,
+        children: /*#__PURE__*/ jsx(Button, {
+            className: className,
+            fullWidth: context.expandToFit,
+            variant: context.variant,
+            intent: active ? context.active : context.inactive,
+            size: context.size,
+            ripple: context.ripple,
+            children: children
+        })
+    });
+};
+ButtonGroupItem.displayName = ToggleGroup.Item.displayName;
+export { ButtonGroup, ButtonGroupItem };

package/dist/components/button/button-group.module.js

@@ -0,0 +1,6 @@
+import "./button-group_module.css";
+const button_group_module = {
+    "button-group": "button-group-uqvOi8",
+    buttonGroup: "button-group-uqvOi8"
+};
+export { button_group_module as default };

package/dist/components/button/button-group_module.css

@@ -0,0 +1,17 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme;
+
+@layer infonomic-components {
+  .button-group-uqvOi8 {
+    place-items: center;
+    gap: var(--gap-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  @media screen and (min-width: 640px) {
+    .button-group-uqvOi8 {
+      flex-direction: row;
+    }
+  }
+}
+

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

@@ -0,0 +1,23 @@
+import type React from 'react';
+import type { Intent, Size, Variant } from './@types/button.js';
+export type ButtonRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+type AsButton = {
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'button'>;
+interface AsSlot {
+    asChild?: true;
+}
+export type ButtonProps<C extends React.ElementType = 'button'> = {
+    variant?: Variant;
+    size?: Size;
+    type?: 'submit' | 'reset' | 'button';
+    intent?: Intent;
+    fullWidth?: boolean;
+    ripple?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    ref?: React.RefObject<ButtonRefType<C>>;
+} & (AsButton | AsSlot) & React.HTMLAttributes<HTMLElement>;
+export declare const Button: <C extends React.ElementType = "button">({ variant, size, type, intent, fullWidth, ripple, className, children, asChild, ref, ...rest }: ButtonProps<C>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAI/D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE9F,KAAK,QAAQ,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAE9E,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;CACxC,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,GACrB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnC,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,gGAY5D,WAAW,CAAC,CAAC,CAAC,sBAgChB,CAAA"}

package/dist/components/button/button.js

@@ -0,0 +1,28 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import classnames from "classnames";
+import material_ripple_effects from "material-ripple-effects";
+import button_module from "./button.module.js";
+const Button = ({ variant = 'filled', size = 'md', type = 'button', intent = 'primary', fullWidth = false, ripple = true, className, children, asChild, ref, ...rest })=>{
+    const Comp = null != asChild && true === asChild ? Slot : 'button';
+    let onMouseDown;
+    if (true === ripple) {
+        const rippleEffect = new material_ripple_effects();
+        onMouseDown = (e)=>{
+            if (rest.onMouseDown) rest.onMouseDown(e);
+            rippleEffect.create(e, 'filled' === variant || 'gradient' === variant ? 'light' : 'dark');
+        };
+    }
+    return /*#__PURE__*/ jsx(Comp, {
+        ref: ref,
+        type: type,
+        className: classnames(button_module.button, button_module[variant], button_module[size], button_module[intent], {
+            [button_module.fullWidth]: true === fullWidth
+        }, className),
+        onMouseDown: onMouseDown,
+        ...rest,
+        children: children
+    });
+};
+export { Button };

package/dist/components/button/button.module.js

@@ -0,0 +1,24 @@
+import "./button_module.css";
+const button_module = {
+    button: "button-IjDhC0",
+    square: "square-P_6yde",
+    round: "round-uqus3n",
+    xs: "xs-jxTd5R",
+    sm: "sm-uD_Ugt",
+    md: "md-Qp9ad6",
+    lg: "lg-FAYTen",
+    xl: "xl-Gwvhl4",
+    filled: "filled-CwGsrO",
+    outlined: "outlined-nZGbxu",
+    gradient: "gradient-ySC3O3",
+    text: "text-GaxlcE",
+    primary: "primary-tUmczz",
+    secondary: "secondary-UqT2AY",
+    noeffect: "noeffect-fpxSgg",
+    success: "success-fTNDEn",
+    info: "info-qrdXQD",
+    warning: "warning-a00T3A",
+    danger: "danger-rwIV_i",
+    fullWidth: "fullWidth-wXvP0v"
+};
+export { button_module as default };