@infonomic/uikit 2.0.0 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEzC,MAAM,WAAW,MAAM;IACrB,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE5F,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;CACrB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;AAEpB,QAAA,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,iEAOtC,SAAS,CAAC,CAAC,CAAC;;;uCAkB+B,UAAU;;;;uCAMX,UAAU;;;;uCASJ,UAAU;;;;uCAKd,UAAU;;;;uCAKX,UAAU;;;CAjCvD,CAAA;AAID,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC;AAsCD,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEzC,MAAM,WAAW,MAAM;IACrB,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE5F,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;CACrB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;AAEpB,QAAA,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,iEAOtC,SAAS,CAAC,CAAC,CAAC;;;uCAkB+B,UAAU;;;;uCAMX,UAAU;;;;uCASJ,UAAU;;;;uCAKd,UAAU;;;;uCAKX,UAAU;;;CAjCvD,CAAA;AAID,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC;AAsCD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [
@@ -25,11 +25,15 @@
   "module": "./dist/react.js",
   "main": "./dist/react.js",
   "files": [
-    "dist",
-    "src/astro.js"
+    "dist/",
+    "src/"
   ],
   "exports": {
-    "./astro": "./src/astro.ts",
+    "./astro": {
+      "types": "./src/astro.d.ts",
+      "import": "./src/astro.js",
+      "default": "./src/astro.js"
+    },
     "./react": {
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js",
@@ -94,7 +98,7 @@
     "access": "public",
     "files": [
       "dist/",
-      "src/astro.js"
+      "src/"
     ]
   },
   "scripts": {

package/src/astro.d.ts

@@ -0,0 +1,43 @@
+import type ButtonComponent from './components/button/button.astro'
+import type IconButtonComponent from './components/button/icon-button.astro'
+import type CardComponent from './components/card/card.astro'
+import type CardContentComponent from './components/card/card-content.astro'
+import type CardDescriptionComponent from './components/card/card-description.astro'
+import type CardFooterComponent from './components/card/card-footer.astro'
+import type CardHeaderComponent from './components/card/card-header.astro'
+import type CardTitleComponent from './components/card/card-title.astro'
+import type ContainerComponent from './components/container/container.astro'
+import type HamburgerComponent from './components/hamburger/hamburger.astro'
+import type ErrorTextComponent from './components/input/error-text.astro'
+import type HelpTextComponent from './components/input/help-text.astro'
+import type InputComponent from './components/input/input.astro'
+import type InputAdornmentComponent from './components/input/input-adornment.astro'
+import type LabelComponent from './components/input/label.astro'
+import type SectionComponent from './components/section/section.astro'
+import type CloseIconComponent from './icons/close-icon.astro'
+import type IconElementComponent from './icons/icon-element.astro'
+import type LightIconComponent from './icons/light-icon.astro'
+import type MoonIconComponent from './icons/moon-icon.astro'
+import type SearchIconComponent from './icons/search-icon.astro'
+
+export declare const Button: typeof ButtonComponent
+export declare const Card: typeof CardComponent
+export declare const CardContent: typeof CardContentComponent
+export declare const CardDescription: typeof CardDescriptionComponent
+export declare const CardFooter: typeof CardFooterComponent
+export declare const CardHeader: typeof CardHeaderComponent
+export declare const CardTitle: typeof CardTitleComponent
+export declare const CloseIcon: typeof CloseIconComponent
+export declare const Container: typeof ContainerComponent
+export declare const ErrorText: typeof ErrorTextComponent
+export declare const Hamburger: typeof HamburgerComponent
+export declare const HelpText: typeof HelpTextComponent
+export declare const IconButton: typeof IconButtonComponent
+export declare const IconElement: typeof IconElementComponent
+export declare const Input: typeof InputComponent
+export declare const InputAdornment: typeof InputAdornmentComponent
+export declare const Label: typeof LabelComponent
+export declare const LightIcon: typeof LightIconComponent
+export declare const MoonIcon: typeof MoonIconComponent
+export declare const SearchIcon: typeof SearchIconComponent
+export declare const Section: typeof SectionComponent

package/src/astro.js

@@ -1,17 +1,17 @@
 import ButtonComponent from './components/button/button.astro'
 import IconButtonComponent from './components/button/icon-button.astro'
+import CardComponent from './components/card/card.astro'
 import CardContentComponent from './components/card/card-content.astro'
 import CardDescriptionComponent from './components/card/card-description.astro'
 import CardFooterComponent from './components/card/card-footer.astro'
 import CardHeaderComponent from './components/card/card-header.astro'
 import CardTitleComponent from './components/card/card-title.astro'
-import CardComponent from './components/card/card.astro'
 import ContainerComponent from './components/container/container.astro'
 import HamburgerComponent from './components/hamburger/hamburger.astro'
 import ErrorTextComponent from './components/input/error-text.astro'
 import HelpTextComponent from './components/input/help-text.astro'
-import InputAdornmentComponent from './components/input/input-adornment.astro'
 import InputComponent from './components/input/input.astro'
+import InputAdornmentComponent from './components/input/input-adornment.astro'
 import LabelComponent from './components/input/label.astro'
 import SectionComponent from './components/section/section.astro'
 import CloseIconComponent from './icons/close-icon.astro'

package/src/components/@types/shared.ts

@@ -0,0 +1,24 @@
+// typescript types
+
+// Arrays make available an iterator for easy storybook layout
+
+export const size = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+export type Size = (typeof size)[number]
+
+export const intent = [
+  'primary',
+  'secondary',
+  'noeffect',
+  'success',
+  'info',
+  'warning',
+  'danger',
+] as const
+
+export type Intent = (typeof intent)[number]
+
+export const icons = ['success', 'info', 'success', 'warning', 'danger'] as const
+export type Icons = (typeof icons)[number]
+
+export const position = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const
+export type Position = (typeof position)[number]

package/src/components/accordion/accordion.module.css

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

package/src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+
+import { Accordion as AccordionComponent } from './accordion.js'
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components',
+  component: AccordionComponent.Root,
+}
+
+export default meta
+
+type Story = StoryObj<typeof AccordionComponent.Root>
+
+export const Accordion: Story = {
+  args: {
+    type: 'single',
+    asChild: true,
+    defaultValue: 'item-1',
+    collapsible: true,
+    className: 'accordion-root border',
+  },
+  render: (args) => (
+    <>
+      <style>
+        {`
+      .accordion-root {
+        border-radius: 6px;
+        padding: 12px 6px;
+        width: 300px;
+        background-color: white;
+        box-shadow: var(--shadow-md);
+      }
+  
+      .accordion-header {
+        border-radius: 6px;
+        padding: 12px;
+      }
+
+      .accordion-header:hover {
+        background-color: var(--gray-25);
+      }
+
+      .accordion-chevron {
+        transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+      }
+
+      .accordion-trigger[data-state="open"] + .accordion-chevron {
+        transform: rotate(180deg);
+      }
+
+      .accordion-content {
+        padding: 0 12px;
+      }
+
+      .dark .accordion-root {
+        background-color: var(--canvas-700);
+      }
+
+      .dark .accordion-header:hover {
+        background-color: var(--canvas-600);
+      }
+
+      
+    `}
+      </style>
+      <AccordionComponent.Root {...args}>
+        <nav>
+          <AccordionComponent.Item value="item-1" className="accordion-item">
+            <AccordionComponent.Header className="accordion-header">
+              <AccordionComponent.Trigger className="accordion-trigger">
+                Is it accessible?
+              </AccordionComponent.Trigger>
+              <ChevronDownIcon className="accordion-chevron" />
+            </AccordionComponent.Header>
+            <AccordionComponent.Content className="accordion-content">
+              <p>Yes. It adheres to the WAI-ARIA design pattern.</p>
+            </AccordionComponent.Content>
+          </AccordionComponent.Item>
+
+          <AccordionComponent.Item value="item-2">
+            <AccordionComponent.Header className="accordion-header">
+              <AccordionComponent.Trigger className="accordion-trigger">
+                Is it unstyled?
+              </AccordionComponent.Trigger>
+              <ChevronDownIcon className="accordion-chevron" />
+            </AccordionComponent.Header>
+            <AccordionComponent.Content className="accordion-content">
+              <ul>
+                <li>Submenu Item One</li>
+                <li>Submenu Item Two</li>
+                <li>Submenu Item Three</li>
+              </ul>
+            </AccordionComponent.Content>
+          </AccordionComponent.Item>
+
+          <AccordionComponent.Item value="item-3">
+            <AccordionComponent.Header className="accordion-header">
+              <AccordionComponent.Trigger className="accordion-trigger">
+                Can it be animated?
+              </AccordionComponent.Trigger>
+              <ChevronDownIcon className="accordion-chevron" />
+            </AccordionComponent.Header>
+            <AccordionComponent.Content className="accordion-content">
+              <p> Yes! You can animate the Accordion with CSS or JavaScript.</p>
+            </AccordionComponent.Content>
+          </AccordionComponent.Item>
+        </nav>
+      </AccordionComponent.Root>
+    </>
+  ),
+}

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,105 @@
+'use client'
+/**
+ * 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'
+
+import cx from 'classnames'
+
+import styles from './accordion.module.css'
+
+export type AccordionRootElement = React.ComponentRef<'div'>
+
+const Root = ({
+  children,
+  className,
+  ref,
+  ...props
+}: {
+  children: React.ReactNode
+  className?: string
+  ref?: React.RefObject<AccordionRootElement>
+} & (AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps)) => {
+  return (
+    <AccordionPrimitive.Root ref={ref} className={className} {...props}>
+      {children}
+    </AccordionPrimitive.Root>
+  )
+}
+
+export type AccordionItemElement = React.ComponentRef<'div'>
+const Item = function AccordionItem({
+  ref,
+  children,
+  className,
+  ...props
+}: AccordionPrimitive.AccordionItemProps & {
+  ref?: React.RefObject<AccordionItemElement>
+}) {
+  return (
+    <AccordionPrimitive.Item className={className} {...props} ref={ref}>
+      {children}
+    </AccordionPrimitive.Item>
+  )
+}
+
+export type AccordionHeaderElement = React.ComponentRef<'h2'>
+const Header = function AccordionHeader({
+  ref,
+  children,
+  className,
+  ...props
+}: AccordionPrimitive.AccordionHeaderProps & {
+  ref?: React.RefObject<AccordionHeaderElement>
+}) {
+  return (
+    <AccordionPrimitive.Header className={cx(styles.header, className)} {...props} ref={ref}>
+      {children}
+    </AccordionPrimitive.Header>
+  )
+}
+
+export type AccordionTriggerElement = React.ComponentRef<'button'>
+const Trigger = function AccordionTrigger({
+  ref,
+  children,
+  className,
+  ...props
+}: AccordionPrimitive.AccordionTriggerProps & {
+  ref?: React.RefObject<AccordionTriggerElement>
+}) {
+  return (
+    <AccordionPrimitive.Trigger ref={ref} className={cx(styles.trigger, className)} {...props}>
+      {children}
+    </AccordionPrimitive.Trigger>
+  )
+}
+
+export type AccordionContentElement = React.ComponentRef<'div'>
+const Content = function AccordionContent({
+  ref,
+  children,
+  className,
+  ...props
+}: AccordionPrimitive.AccordionContentProps & {
+  ref?: React.RefObject<AccordionContentElement>
+}) {
+  return (
+    <AccordionPrimitive.Content className={cx(styles.content, className)} {...props} ref={ref}>
+      {children}
+    </AccordionPrimitive.Content>
+  )
+}
+
+export const Accordion = {
+  Root,
+  Item,
+  Header,
+  Trigger,
+  Content,
+}

package/src/components/animation/fade-in-lift.stories.tsx

@@ -0,0 +1,81 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Section } from '../section/section.js'
+import { FadeInLift } from './fade-in-lift.js'
+
+const meta: Meta<typeof FadeInLift> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Animation/FadeInLift',
+  component: FadeInLift,
+}
+
+export default meta
+
+type Story = StoryObj<typeof FadeInLift>
+
+const DivDemo = (): React.JSX.Element => {
+  return (
+    <div style={{ marginLeft: '4rem', marginBottom: '4rem' }}>
+      <Section style={{ height: '100vh' }}>
+        <FadeInLift
+          as="div"
+          duration={1}
+          delay={0.5}
+          style={{
+            width: '400px',
+            height: '400px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'var(--primary-500)',
+          }}
+        >
+          <p style={{ color: 'black' }}>Fade me in 1!</p>
+        </FadeInLift>
+      </Section>
+      <Section style={{ height: '100vh' }}>
+        <FadeInLift
+          as="span"
+          duration={1}
+          delay={0.2}
+          style={{
+            width: '400px',
+            height: '400px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'var(--secondary-500)',
+          }}
+        >
+          <p style={{ color: 'black' }}>Fade me in 2!</p>
+        </FadeInLift>
+      </Section>
+      <Section style={{ height: '100vh' }}>
+        <FadeInLift
+          duration={1}
+          delay={0.2}
+          style={{
+            width: '400px',
+            height: '400px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'var(--yellow-500)',
+          }}
+        >
+          <p style={{ color: 'black' }}>Fade me in 3!</p>
+        </FadeInLift>
+      </Section>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <DivDemo />,
+}

package/src/components/animation/fade-in-lift.tsx

@@ -0,0 +1,42 @@
+'use client'
+import type React from 'react'
+import type { ComponentPropsWithoutRef, ElementType } from 'react'
+
+import { motion } from 'motion/react'
+
+// Define a generic component type
+interface FadeInLiftProps<T extends ElementType> {
+  as?: T
+  children: React.ReactNode
+  duration?: number
+  delay?: number
+  className?: string
+}
+
+// Use a generic type to infer correct props
+export const FadeInLift = <T extends ElementType = 'div'>({
+  as,
+  children,
+  className,
+  duration = 0.5,
+  delay = 0,
+  ...rest
+}: FadeInLiftProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FadeInLiftProps<T>>) => {
+  const Component = as ? motion(as) : motion.div
+
+  return (
+    <Component
+      className={className}
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{
+        opacity: 1,
+        y: 0,
+        transition: { duration, delay },
+      }}
+      viewport={{ once: true }}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}

package/src/components/avatar/avatar.module.css

@@ -0,0 +1,54 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  /* relative inline-flex h-10 w-10 rounded-full */
+  .avatar-root {
+    position: relative;
+    display: inline-flex;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+  }
+
+  .avatar-image {
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  /* flex h-full w-full items-center justify-center rounded-full bg-white dark:bg-gray-800 */
+  .avatar-fallback {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--color-white);
+  }
+
+
+  .avatar-text {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    text-transform: uppercase;
+    color: var(--gray-700);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .avatar-fallback {
+      background-color: var(--gray-800);
+    }
+
+    .avatar-text {
+      color: var(--gray-400);
+    }
+  }
+}

package/src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta } from '@storybook/react-vite'
+import type React from 'react'
+
+import { Avatar as AvatarComponent } from './avatar.js'
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components',
+  component: AvatarComponent,
+}
+
+export default meta
+
+export const Avatar = (): React.JSX.Element => (
+  <div
+    style={{
+      maxWidth: '300px',
+      marginBottom: '24px',
+      display: 'flex',
+      justifyContent: 'center',
+    }}
+  >
+    <AvatarComponent initials="AB" />
+  </div>
+)

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { Avatar as AvatarPrimitive } from 'radix-ui'
+import type React from 'react'
+
+import styles from './avatar.module.css'
+
+const url = 'https://picsum.photos/150'
+
+export const Avatar = ({ initials }: { initials: string }): React.JSX.Element => {
+  return (
+    <AvatarPrimitive.Root className={styles['avatar-root']}>
+      <AvatarPrimitive.Image src={url} alt="Avatar" className={styles['avatar-image']} />
+      <AvatarPrimitive.Fallback className={styles['avatar-fallback']} delayMs={600}>
+        <span className={styles['avatar-text']}>{initials}</span>
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  )
+}

package/src/components/button/@types/button.ts

@@ -0,0 +1,17 @@
+// generic types
+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.
+ */
+
+// typescript types
+export const variant = ['filled', 'outlined', 'gradient', 'text'] as const
+export type Variant = (typeof variant)[number]
+
+export type Size = 'md' | s
+export type Intent = 'primary' | t
+export type FullWidth = boolean
+export type EnableRipple = boolean

package/src/components/button/button-group.module.css

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