@vkzstudio/muza-ui 1.0.0 → 1.0.2

package/CLAUDE_CONSUMER.md

@@ -0,0 +1,238 @@
+# Muza UI Library Integration
+
+This project uses the `@vkzstudio/muza-ui` component library. Follow these guidelines when working with Muza UI components.
+
+## Quick Reference
+
+```tsx
+// Import styles (required - should already be in main entry file)
+// Alternative: import '@vkzstudio/muza-ui/dist/muza-ui.css'
+// Import components
+import { Alert, Button, Input, Select } from '@vkzstudio/muza-ui'
+import '@vkzstudio/muza-ui/styles'
+```
+
+## Component Usage Rules
+
+### 1. Always Use Library Components
+
+NEVER create new UI components that duplicate Muza UI functionality. Check available components first:
+
+**Complete Component List (42 components)**
+
+**Form & Input Components (13)**:
+Button, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload
+
+**Layout & Structure (5)**:
+Accordion, Flex, Typography, Dialog, ExpandableTable
+
+**Feedback & Status (7)**:
+Alert, Tag, Loader, EmptyState, Snackbar, PinIndicator, SliderIndicators
+
+**Navigation (8)**:
+Breadcrumb, DropdownMenu, SegmentedControl, SegmentedIconControl, Stepper, SwipeButton, EdgeButton, LanguageSwitcher
+
+**Media & Display (3)**:
+Avatar, Lightbox, Tooltip
+
+**Date & Time (3)**:
+Calendar, DatePicker, TimePicker
+
+**Specialized (3)**:
+Popover, LoginScreen, Icons
+
+### 2. Component Variants
+
+Use consistent variants across the app:
+
+```tsx
+// Button variants
+variant: "primary" | "secondary" | "tertiary" | "invert" | "dashed" | "link" | "linkInvert"
+size: "xs" | "sm" | "md" | "lg"
+
+// Button modifiers (can combine with any variant)
+ghost: boolean  // Ghost styling overlay
+danger: boolean // Danger styling overlay
+
+// Examples of combinations
+<Button variant="primary" ghost>Ghost Primary</Button>
+<Button variant="secondary" danger>Danger Secondary</Button>
+<Button variant="tertiary" ghost danger>Ghost Danger Tertiary</Button>
+
+// Other Button props
+loading, fullWidth, icon, iconPosition
+
+// Input states
+<Input error={hasError} disabled={isDisabled} />
+<Input mask="(000) 000-0000" placeholder="Phone" /> // With masking
+
+// Alert types (use 'type' not 'variant')
+<Alert type="info" | "success" | "warning" | "error" />
+```
+
+### 3. Styling Guidelines
+
+- **DO NOT** recreate Muza UI components with custom CSS
+- **DO** use the `className` prop to add utility classes when needed
+- **DO** use design tokens for custom components that extend Muza UI
+
+```tsx
+// Good - extending with utilities
+<Button className="w-full mt-4" variant="primary">
+  Submit
+</Button>
+
+// Bad - recreating component styles
+<button className="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded">
+  Submit
+</button>
+```
+
+### 4. Form Patterns
+
+Always use Muza UI form components:
+
+```tsx
+// Good - using library components
+import { Input, Button, Checkbox, Radio } from '@vkzstudio/muza-ui'
+
+function Form() {
+  return (
+    <form>
+      <Input name="email" type="email" required />
+      <Checkbox id="terms" label="I agree to terms" />
+      <Radio value="option1" label="Option 1" />
+      <Button type="submit" variant="primary">
+        Submit
+      </Button>
+    </form>
+  )
+}
+
+// Bad - using native HTML elements
+function Form() {
+  return (
+    <form>
+      <input type="email" />
+      <input type="checkbox" />
+      <button>Submit</button>
+    </form>
+  )
+}
+```
+
+### 5. Icons
+
+Use Muza UI icons from the Solar Icons integration:
+
+```tsx
+import { Button } from '@vkzstudio/muza-ui'
+
+// Icons are integrated with @solar-icons/react-perf
+// Import from Solar Icons directly in your project
+// Muza UI components support icon props where applicable
+
+;<Button icon={<SearchIcon />} iconPosition="start">
+  Search
+</Button>
+```
+
+### 7. Accessibility
+
+All Muza UI components include proper ARIA attributes. Maintain accessibility when extending:
+
+```tsx
+<Button aria-label="Save document" aria-busy={isLoading} disabled={isLoading}>
+  {isLoading ? 'Saving...' : 'Save'}
+</Button>
+```
+
+## TypeScript Integration
+
+The library is fully typed. Use the exported types:
+
+```tsx
+import type { ButtonProps, InputProps } from '@vkzstudio/muza-ui'
+
+interface CustomButtonProps extends ButtonProps {
+  customProp?: boolean
+}
+```
+
+## Performance Guidelines
+
+1. **Import only needed components** - Tree shaking is supported
+2. **Use lazy loading for large components** like Calendar or DatePicker
+3. **Memoize complex forms** when using many Muza UI inputs
+
+## DO NOT
+
+- Create custom Button, Input, or other basic components
+- Use native HTML form elements when Muza UI equivalents exist
+- Override core component styles with !important
+- Mix different UI libraries (Material-UI, Ant Design, etc.) with Muza UI
+- Create custom toast/notification systems
+
+## DO
+
+- Use Muza UI components consistently throughout the app
+- Extend components with className for spacing/layout
+- Follow the established variant patterns
+- Maintain accessibility standards
+- Report any missing components or features needed
+
+## Package Exports
+
+The library supports multiple export paths for flexibility:
+
+```tsx
+// Main components export
+import { Button, Input } from '@vkzstudio/muza-ui'
+
+// Styles
+import '@vkzstudio/muza-ui/styles'
+
+// Individual component exports (tree-shaking friendly)
+import { Button } from '@vkzstudio/muza-ui/components/Button'
+
+// Utilities
+import { cn } from '@vkzstudio/muza-ui/utils'
+
+// Global styles
+import '@vkzstudio/muza-ui/globals.css'
+
+// Third-party library styles (required for components like Lightbox)
+import '@vkzstudio/muza-ui/3rd-parties.css'
+
+// 3D Models (for LoginScreen)
+import modelPath from '@vkzstudio/muza-ui/models/Login3D.glb'
+
+// Individual style tokens (granular imports)
+import '@vkzstudio/muza-ui/styles/token-colors.css'
+import '@vkzstudio/muza-ui/styles/typography.css'
+```
+
+## Troubleshooting
+
+If a component isn't rendering:
+
+1. Check that `@vkzstudio/muza-ui/styles` is imported in your entry file
+2. Verify React 18+ is installed
+3. Ensure all required peer dependencies are installed (see package.json)
+4. Verify the component is properly imported
+5. Check browser console for errors
+6. Ensure Tailwind CSS is properly configured if using custom utilities
+
+**For LoginScreen 3D issues:**
+
+- Ensure the GLB file is copied to `public/models/Login3D.glb`
+- Check that `@react-three/fiber`, `@react-three/drei`, and `three` are installed
+- The 3D scene only renders on desktop (screen width > 1024px)
+
+**For Lightbox image gallery issues:**
+
+- **REQUIRED:** Import third-party styles: `import '@vkzstudio/muza-ui/3rd-parties.css'` in your entry file
+- Check that `photoswipe` and `react-photoswipe-gallery` peer dependencies are installed
+- Ensure images have proper `width` and `height` props for the lightbox to display correctly
+
+Remember: The goal is consistency. Use Muza UI components as designed to maintain a unified design system across the application.

package/README.md

@@ -105,7 +105,9 @@ This creates:
 
 - `dist/index.js` - ES module bundle
 - `dist/index.d.ts` - TypeScript declarations
-- `dist/style.css` - Compiled CSS
+- `dist/muza-ui.css` - Compiled CSS with all design tokens
+- `dist/components/` - Individual component modules
+- `dist/styles/` - Design system token files
 
 ### Storybook Build
 
@@ -127,11 +129,17 @@ Creates `storybook-static/` directory for deployment.
 
 ## Library Usage
 
-After building, the library can be consumed:
+Install the package:
+
+```bash
+npm install @vkzstudio/muza-ui
+```
+
+**Important:** This library requires Tailwind CSS 4 to be configured in your project.
 
 ```typescript
-import { Button } from 'muza-ui'
-import 'muza-ui/styles'
+import { Button } from '@vkzstudio/muza-ui'
+import '@vkzstudio/muza-ui/styles'
 
 function App() {
   return <Button variant="primary">Click me</Button>

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as getDefaultExportFromCjs
+};

package/dist/_virtual/constants.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/react-reconciler/constants.js";
+var t = r();
+export {
+  t as c
+};

package/dist/_virtual/constants2.js

@@ -0,0 +1,4 @@
+var o = { exports: {} };
+export {
+  o as __module
+};

package/dist/_virtual/index.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as o } from "../node_modules/prop-types/index.js";
+var p = /* @__PURE__ */ o();
+const s = /* @__PURE__ */ r(p);
+export {
+  s as default
+};

package/dist/_virtual/index2.js

@@ -0,0 +1,4 @@
+var p = { exports: {} };
+export {
+  p as __module
+};

package/dist/_virtual/index3.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/index4.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as e } from "../node_modules/react-reconciler/index.js";
+var o = e();
+const a = /* @__PURE__ */ r(o);
+export {
+  a as default
+};

package/dist/_virtual/index5.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/scheduler/index.js";
+var s = r();
+export {
+  s
+};

package/dist/_virtual/index6.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/index7.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/react-dom-server-legacy.browser.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/react-dom-server-legacy.browser.production.min.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/react-dom-server.browser.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/react-dom-server.browser.production.min.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/react-is.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/react-is.production.min.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/react-reconciler-constants.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/react-reconciler-constants.production.min.js

@@ -0,0 +1,4 @@
+var o = {};
+export {
+  o as __exports
+};

package/dist/_virtual/react-reconciler.development.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/scheduler.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/scheduler.production.min.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/server.browser.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/react-dom/server.browser.js";
+var s = r();
+export {
+  s
+};

package/dist/_virtual/server.browser2.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-declare function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionHeader({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Header>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionItem, AccordionHeader, AccordionContent };
+declare const Accordion: ({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionItem: ({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionHeader: ({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Header>) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionContent: ({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) => import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem };
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAa/D,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAUtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CA2BtD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,MAAM,CAAC,2CA4BxD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAoBzD;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAa/D,QAAA,MAAM,SAAS,GAAI,yBAGhB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,4CAUtD,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,mCAIpB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,4CA2BtD,CAAA;AAED,QAAA,MAAM,eAAe,GAAI,mCAItB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,MAAM,CAAC,4CA6BxD,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAIvB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,4CAoBzD,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,116 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import * as s from "react";
+import * as n from "@radix-ui/react-accordion";
+import { Typography as m } from "../Typography/Typography.js";
+import { cn as c } from "../../utils/cn.js";
+import { AltArrowDownOutline as p } from "@solar-icons/react-perf";
+const d = s.createContext(
+  "single"
+), i = () => s.useContext(d), g = ({
+  className: o,
+  ...e
+}) => /* @__PURE__ */ t(d.Provider, { value: e.type, children: /* @__PURE__ */ t(
+  n.Root,
+  {
+    "data-slot": "accordion",
+    className: c("flex w-full flex-col gap-md", o),
+    ...e
+  }
+) }), y = ({
+  className: o,
+  children: e,
+  ...a
+}) => {
+  const r = i();
+  return /* @__PURE__ */ t(
+    n.Item,
+    {
+      "data-slot": "accordion-item",
+      className: "w-full",
+      ...a,
+      children: /* @__PURE__ */ t(
+        n.Trigger,
+        {
+          "data-slot": "accordion-trigger",
+          className: c(
+            "relative w-full rounded-xl border border-stroke-base-primary bg-surface-base-secondary",
+            "px-comp-accordion-p py-comp-accordion-p-hor",
+            "cursor-pointer transition-colors hover:border-stroke-brand-hover",
+            "focus-visible-default",
+            {
+              "rounded-lg border-0 bg-surface-brand-brand-tertiary p-comp-accordion-p hover:bg-surface-base-primary-hover": r === "single"
+            },
+            o
+          ),
+          children: e
+        }
+      )
+    }
+  );
+}, h = ({
+  className: o,
+  children: e,
+  ...a
+}) => {
+  const r = i();
+  return /* @__PURE__ */ l(
+    n.Header,
+    {
+      className: c(
+        "flex flex-1 cursor-pointer items-center justify-between gap-4 text-text-dark-primary-def transition-all outline-none [&[data-state=open]>svg]:rotate-180",
+        "data-[state=open]:text-text-brand-def",
+        {
+          "text-text-brand-def data-[state=open]:text-text-brand-hover": r === "single"
+        },
+        o
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ t(
+          m,
+          {
+            component: "span",
+            variant: "title",
+            weight: "medium",
+            size: r === "single" ? "lg" : "base",
+            className: "text-left",
+            fixY: !0,
+            children: e
+          }
+        ),
+        /* @__PURE__ */ t(p, { className: "size-comp-accordion-ico-size-md shrink-0 text-comp-select-icon-brand-def transition-transform duration-300" })
+      ]
+    }
+  );
+}, v = ({
+  className: o,
+  children: e,
+  ...a
+}) => {
+  const r = i();
+  return /* @__PURE__ */ t(
+    n.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "cursor-pointer overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      ...a,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: c(
+            "pt-md text-left",
+            { "pt-2xl text-text-brand-def": r === "single" },
+            o
+          ),
+          children: e
+        }
+      )
+    }
+  );
+};
+export {
+  g as Accordion,
+  v as AccordionContent,
+  h as AccordionHeader,
+  y as AccordionItem
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EACL,SAAS,EAIV,MAAM,aAAa,CAAA;AAIpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4BhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA8CpB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,eAAe,CAqCxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,eAAe,CAoDtD,CAAA"}
+{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EACL,SAAS,EAIV,MAAM,aAAa,CAAA;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4BhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA8CpB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,eAAe,CAsCxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,eAAe,CAqDtD,CAAA"}

package/dist/components/Alert/Alert.d.ts

@@ -10,6 +10,6 @@ export interface AlertProps extends React.ComponentProps<'div'>, VariantProps<ty
     onClose?: () => void;
     className?: string;
 }
-declare function Alert({ className, type, size, textWeight, isClosable, children, onClose, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare const Alert: ({ className, type, size, textWeight, isClosable, children, onClose, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
 export { Alert };
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,aAAa;;;8EAiBjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,UAAsB,EACtB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,kDAqDZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,aAAa;;;8EAiBjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,GAAI,gFASZ,UAAU,mDAqDZ,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,83 @@
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import * as o from "react";
+import { cva as b } from "class-variance-authority";
+import { XClose as y } from "../Icons/CustomIcons.js";
+import { Typography as h } from "../Typography/Typography.js";
+import { cn as v } from "../../utils/cn.js";
+const w = b(["rounded-2xl"], {
+  variants: {
+    type: {
+      info: "bg-comp-alert-bg-info text-comp-alert-text-info",
+      success: "bg-comp-alert-bg-success text-comp-alert-text-success",
+      warning: "bg-comp-alert-bg-warning text-comp-alert-text-warning",
+      error: "bg-comp-alert-bg-error text-comp-alert-text-error"
+    },
+    size: {
+      large: "rounded-2xl px-comp-alert-ver-p-lg py-comp-alert-hor-p-lg",
+      small: "rounded-xl px-comp-alert-ver-p-sm py-comp-alert-hor-p-sm"
+    }
+  },
+  defaultVariants: {
+    type: "info",
+    size: "large"
+  }
+}), E = ({
+  className: s,
+  type: i,
+  size: t,
+  textWeight: l = "regular",
+  isClosable: n,
+  children: c,
+  onClose: e,
+  ...p
+}) => {
+  const [m, g] = o.useState(!0), [a, u] = o.useState(!1), f = () => {
+    u(!0);
+  }, d = () => {
+    a && (g(!1), e == null || e());
+  };
+  return m ? /* @__PURE__ */ x(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: v(
+        w({ type: i, size: t }),
+        s,
+        "flex w-fit items-center gap-sm",
+        a ? "opacity-0 transition-opacity duration-300" : "opacity-100"
+      ),
+      onTransitionEnd: d,
+      ...p,
+      children: [
+        /* @__PURE__ */ r(
+          h,
+          {
+            component: "span",
+            variant: "body",
+            size: t === "large" ? "base" : "sm",
+            weight: l,
+            fixY: !0,
+            children: c
+          }
+        ),
+        n && /* @__PURE__ */ r(
+          "button",
+          {
+            onClick: f,
+            className: "cursor-pointer focus-visible-auto",
+            children: /* @__PURE__ */ r(
+              y,
+              {
+                className: t === "large" ? "size-icon-medium" : "size-icon-small"
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : null;
+};
+export {
+  E as Alert
+};

package/dist/components/Alert/Alert.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA4D5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,IAAI,EAAE,KAelB,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAenB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwHzB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwHjC,CAAA"}
+{"version":3,"file":"Alert.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA4D5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,IAAI,EAAE,KAgBlB,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAwHzB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwHjC,CAAA"}