@fragment-build/ui 2.2.0 → 3.0.4

package/README.md

@@ -26,6 +26,7 @@ Fragment UI is a design system and React component library which provides alread
 - [✨ Components](#-components)
 - [⏳ Installation](#-installation)
 - [🔧 Configuration](#-configuration)
+    - [`linkComponent`](#linkcomponent)
   - [Next.js 13+](#nextjs-13)
 - [🤝 Contributing](#-contributing)
 - [👨‍💻 Development](#-development)
@@ -68,32 +69,12 @@ All done. Enjoy 🎉
 
 ## 🔧 Configuration
 
-```ts
-// fragment.ts
-import { fragmentui } from '@fragment-build/tailwind.plugin';
-
-export default fragmentui();
-```
-
-```ts
-// hero.ts
-import { heroui } from '@fragment-build/tailwind.plugin';
-
-export default heroui();
-```
-
 ```ts
 // src/main.css
 
 @import 'tailwindcss';
-
-@plugin '../hero.ts';
-@plugin '../fragment.ts';
-
-/* Note: You may need to change the path to fit your project structure */
-@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@source '../node_modules/@fragment-build/ui/dist/**/*.{js,ts,jsx,tsx}';
-@custom-variant dark (&:is(.dark *));
+@import "@heroui/styles"; 
+@import "@fragment-build/ui";
 ```
 
 It is essential to add the FragmentUIProvider at the root of your application.
@@ -114,19 +95,28 @@ function App() {
 }
 ```
 
-### Next.js 13+
+#### `linkComponent`
 
-When using Next.js you will need to add a file to re-export Fragment UI using `'use client';` to tell Next.js to render them as client components.
+Fragment UI renders navigation links internally (e.g. in `Navbar`, `Sidebar`). By default it uses a plain `<a>` tag. Pass a `linkComponent` to use your router's link component instead so navigation stays client-side:
 
-```ts
-'use client';
+```tsx
+import Link from 'next/link';
+import { FragmentUIProvider } from '@fragment-build/ui';
 
-export { ... } from '@fragment-build/ui';
+function App() {
+  return (
+    <FragmentUIProvider linkComponent={Link}>
+      <YourApplication />
+    </FragmentUIProvider>
+  );
+}
 ```
 
-Now just import all the components you need from this file.
+Any component that accepts an `href` prop works — React Router's `<Link>`, TanStack Router's `<Link>`, etc.
+
+### Next.js 13+
 
-And you need to [setup Tailwind 4 using PostCSS](https://tailwindcss.com/docs/installation/framework-guides/nextjs)
+You need to [setup Tailwind 4 using PostCSS](https://tailwindcss.com/docs/installation/framework-guides/nextjs)
 
 ```ts
 // postcss.config.mjs

package/components/grid/Grid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Primary UI component for selecting a color
+ */
+export interface GridProps {
+    children: React.ReactNode;
+    size: 'sm' | 'md' | 'lg';
+}
+export declare const Grid: React.FC<GridProps>;

package/components/grid/Grid.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { grid } from './Grid.styles';
+export const Grid = ({ children, ...props }) => {
+    const { base } = grid(props);
+    return _jsx("div", { className: base(), children: children });
+};
+//# sourceMappingURL=Grid.js.map

package/components/grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/components/grid/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAWrC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAE7B,OAAO,cAAK,SAAS,EAAE,IAAI,EAAE,YAAG,QAAQ,GAAO,CAAC;AAClD,CAAC,CAAC"}

package/components/grid/Grid.styles.d.ts

@@ -0,0 +1,43 @@
+export declare const grid: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;

package/components/grid/Grid.styles.js

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+export const grid = tv({
+    slots: {
+        base: 'fragment-grid',
+    },
+    variants: {
+        size: {
+            sm: { base: 'fragment-grid--sm' },
+            md: { base: 'fragment-grid--md' },
+            lg: { base: 'fragment-grid--lg' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+//# sourceMappingURL=Grid.styles.js.map

package/components/grid/Grid.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.styles.js","sourceRoot":"","sources":["../../src/components/grid/Grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC;IACrB,KAAK,EAAE;QACL,IAAI,EAAE,eAAe;KACtB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE;YACjC,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE;YACjC,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE;SAClC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC"}

package/components/multi-switch/MultiSwitch.d.ts

@@ -0,0 +1,6 @@
+import { type ToggleButtonGroup as ToggleButtonGroupType } from '@heroui/react';
+export interface MultiSwitchProps extends Omit<ToggleButtonGroupType['RootProps'], 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'disallowEmptySelection'> {
+    defaultValue?: number;
+    onValueChange: (value: number) => void;
+}
+export declare const MultiSwitch: import("react").ForwardRefExoticComponent<Omit<MultiSwitchProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/multi-switch/MultiSwitch.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconCheck, IconSlash, IconX } from '@tabler/icons-react';
+import { ToggleButton, ToggleButtonGroup } from '@heroui/react';
+export const MultiSwitch = forwardRef(({ defaultValue = 1, onValueChange, size = 'md', ...props }, ref) => (_jsxs(ToggleButtonGroup, { ref: ref, className: "fragment-multi-switch", selectionMode: "single", disallowEmptySelection: true, defaultSelectedKeys: [String(defaultValue)], onSelectionChange: (keys) => onValueChange(Number([...keys][0])), size: size, ...props, children: [_jsx(ToggleButton, { id: "0", isIconOnly: true, className: "fragment-multi-switch__btn--danger", children: _jsx(IconX, {}) }), _jsx(ToggleButton, { id: "1", isIconOnly: true, className: "fragment-multi-switch__btn--neutral", children: _jsx(IconSlash, {}) }), _jsx(ToggleButton, { id: "2", isIconOnly: true, children: _jsx(IconCheck, {}) })] })));
+//# sourceMappingURL=MultiSwitch.js.map

package/components/multi-switch/MultiSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSwitch.js","sourceRoot":"","sources":["../../src/components/multi-switch/MultiSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAmD,MAAM,eAAe,CAAC;AAOjH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAmC,CAAC,EACvE,YAAY,GAAG,CAAC,EAChB,aAAa,EACb,IAAI,GAAG,IAAI,EACX,GAAG,KAAK,EACT,EAAE,GAAG,EAAE,EAAE,CAAC,CACT,MAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,uBAAuB,EACjC,aAAa,EAAC,QAAQ,EACtB,sBAAsB,QACtB,mBAAmB,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAC3C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChE,IAAI,EAAE,IAAI,KACN,KAAK,aAET,KAAC,YAAY,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,QAAC,SAAS,EAAC,oCAAoC,YAAC,KAAC,KAAK,KAAG,GAAe,EACvG,KAAC,YAAY,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,QAAC,SAAS,EAAC,qCAAqC,YAC7E,KAAC,SAAS,KAAG,GACA,EACf,KAAC,YAAY,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,kBAC7B,KAAC,SAAS,KAAG,GACA,IACG,CACrB,CAAC,CAAC"}

package/components/multi-switch/MultiSwitch.styles.d.ts

@@ -0,0 +1,43 @@
+export declare const multiSwitch: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+}, undefined, {
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+}, undefined, unknown, unknown, undefined>>;

package/components/multi-switch/MultiSwitch.styles.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const multiSwitch = tv({
+    slots: {
+        button: 'fragment-multi-switch__button',
+    },
+    variants: {
+        size: {
+            sm: { button: 'fragment-multi-switch__button--sm' },
+            md: { button: 'fragment-multi-switch__button--md' },
+            lg: { button: 'fragment-multi-switch__button--lg' },
+        },
+    },
+});
+//# sourceMappingURL=MultiSwitch.styles.js.map

package/components/multi-switch/MultiSwitch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSwitch.styles.js","sourceRoot":"","sources":["../../src/components/multi-switch/MultiSwitch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;IAC5B,KAAK,EAAE;QACL,MAAM,EAAE,+BAA+B;KACxC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,MAAM,EAAE,mCAAmC,EAAE;YACnD,EAAE,EAAE,EAAE,MAAM,EAAE,mCAAmC,EAAE;YACnD,EAAE,EAAE,EAAE,MAAM,EAAE,mCAAmC,EAAE;SACpD;KACF;CACF,CAAC,CAAC"}

package/components/theme-switch/ThemeSwitch.d.ts

@@ -0,0 +1,6 @@
+import { type ButtonProps } from '@heroui/react';
+/**
+ * Primary UI component for selecting a color
+ */
+export type ThemeSwitchProps = ButtonProps;
+export declare const ThemeSwitch: React.FC<ThemeSwitchProps>;

package/components/theme-switch/ThemeSwitch.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from 'next-themes';
+import { IconMoon, IconSun } from '@tabler/icons-react';
+import { Button } from '@heroui/react';
+import { useEffect, useState } from 'react';
+export const ThemeSwitch = (props) => {
+    const [mounted, setMounted] = useState(false);
+    const { theme, setTheme } = useTheme();
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!mounted)
+        return null;
+    return (_jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", onPress: () => setTheme(theme === 'light' ? 'dark' : 'light'), ...props, children: theme === 'light' ? _jsx(IconSun, { size: 18 }) : _jsx(IconMoon, { size: 18 }) }));
+};
+//# sourceMappingURL=ThemeSwitch.js.map

package/components/theme-switch/ThemeSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitch.js","sourceRoot":"","sources":["../../src/components/theme-switch/ThemeSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAQ,EAAE,MAAM,EAAoB,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAG,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,CACL,KAAC,MAAM,IAAC,UAAU,QAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAM,KAAK,YACrH,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GAC5D,CACV,CAAC;AACJ,CAAC,CAAC"}

package/constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Breakpoints from Tailwind V2
+ *
+ * @see https://tailwindcss.com/docs/breakpoints
+ */
+export declare const breakpointsTailwind: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+};

package/constants.js

@@ -0,0 +1,13 @@
+/**
+ * Breakpoints from Tailwind V2
+ *
+ * @see https://tailwindcss.com/docs/breakpoints
+ */
+export const breakpointsTailwind = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536
+};
+//# sourceMappingURL=constants.js.map

package/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["src/constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,IAAI;CACZ,CAAA"}

package/context.d.ts

@@ -0,0 +1,7 @@
+export type LinkComponent = React.ElementType;
+interface FragmentUIContextValue {
+    linkComponent: LinkComponent;
+}
+export declare const FragmentUIContext: import("react").Context<FragmentUIContextValue>;
+export declare const useFragmentUI: () => FragmentUIContextValue;
+export {};

package/context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const FragmentUIContext = createContext({
+    linkComponent: 'a',
+});
+export const useFragmentUI = () => useContext(FragmentUIContext);
+//# sourceMappingURL=context.js.map

package/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["src/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB;IACrE,aAAa,EAAE,GAAG;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC"}

package/fragments/form/Form.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Primary UI component for Form Sections
+ */
+import React from 'react';
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    children: React.ReactNode[];
+}
+export declare const Form: React.FC<FormProps>;

package/fragments/form/Form.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Primary UI component for Form Sections
+ */
+import React, { isValidElement } from 'react';
+import { Separator } from '@heroui/react';
+import { form } from './Form.styles';
+export const Form = ({ children, ...props }) => {
+    const v = form();
+    return (_jsx("form", { ...props, children: children.filter(isValidElement).map((child, index) => index === 0 ? child : (_jsxs(React.Fragment, { children: [_jsx(Separator, { className: v.separator() }), child] }, index))) }));
+};
+//# sourceMappingURL=Form.js.map

package/fragments/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/fragments/form/Form.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMrC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC;IAEjB,OAAO,CACL,kBAAU,KAAK,YACZ,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAC3E,MAAC,KAAK,CAAC,QAAQ,eACb,KAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,GAAI,EACtC,KAAK,KAFa,KAAK,CAGT,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC"}

package/fragments/form/Form.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const form: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            separator?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            separator?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            separator?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    separator: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;

package/fragments/form/Form.styles.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+export const form = tv({
+    slots: {
+        separator: 'fragment-form__separator',
+    },
+});
+//# sourceMappingURL=Form.styles.js.map

package/fragments/form/Form.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.styles.js","sourceRoot":"","sources":["../../src/fragments/form/Form.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC;IACrB,KAAK,EAAE;QACL,SAAS,EAAE,0BAA0B;KACtC;CACF,CAAC,CAAC"}

package/fragments/form/FormSection.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Primary UI component for Form Sections
+ */
+import React from 'react';
+export interface FormSectionProps {
+    children: React.ReactNode;
+    title: string;
+    description?: React.ReactNode;
+    direction?: 'vertical' | 'horizontal';
+    fullWidth?: boolean;
+}
+export declare const FormSection: React.FC<FormSectionProps>;

package/fragments/form/FormSection.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formSection } from './FormSection.styles';
+export const FormSection = ({ children, title, description, ...props }) => {
+    const v = formSection(props);
+    return (_jsx("div", { className: v.base(), children: _jsxs("div", { className: v.main(), children: [_jsxs("div", { className: v.info(), children: [_jsx("h3", { children: title }), _jsx("div", { className: v.description(), children: description })] }), _jsx("div", { className: v.content(), children: children })] }) }));
+};
+//# sourceMappingURL=FormSection.js.map

package/fragments/form/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","sourceRoot":"","sources":["../../src/fragments/form/FormSection.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAUnD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpG,MAAM,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE7B,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YACtB,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACtB,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACtB,uBAAK,KAAK,GAAM,EAChB,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAO,IAChD,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YACxB,QAAQ,GACL,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/fragments/form/FormSection.styles.d.ts

@@ -0,0 +1,61 @@
+export declare const formSection: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    main: string;
+    info: string;
+    content: string;
+    description: string;
+}, undefined, {
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    main: string;
+    info: string;
+    content: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    main: string;
+    info: string;
+    content: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;

package/fragments/form/FormSection.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+export const formSection = tv({
+    slots: {
+        base: 'fragment-form-section',
+        main: 'fragment-form-section__main',
+        info: 'fragment-form-section__info',
+        content: 'fragment-form-section__content',
+        description: 'fragment-form-section__description',
+    },
+    variants: {
+        direction: {
+            horizontal: { base: 'fragment-form-section--horizontal' },
+            vertical: { base: 'fragment-form-section--vertical' },
+        },
+        fullWidth: {
+            true: { base: 'fragment-form-section--full-width' },
+        },
+    },
+    defaultVariants: {
+        direction: 'vertical',
+        fullWidth: false,
+    },
+});
+//# sourceMappingURL=FormSection.styles.js.map

package/fragments/form/FormSection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.styles.js","sourceRoot":"","sources":["../../src/fragments/form/FormSection.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;IAC5B,KAAK,EAAE;QACL,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,6BAA6B;QACnC,IAAI,EAAE,6BAA6B;QACnC,OAAO,EAAE,gCAAgC;QACzC,WAAW,EAAE,oCAAoC;KAClD;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,UAAU,EAAE,EAAE,IAAI,EAAE,mCAAmC,EAAE;YACzD,QAAQ,EAAE,EAAE,IAAI,EAAE,iCAAiC,EAAE;SACtD;QACD,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,IAAI,EAAE,mCAAmC,EAAE;SACpD;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAC"}

package/fragments/navbar/Navbar.d.ts

@@ -0,0 +1,30 @@
+import type { AvatarImageProps, AvatarProps, DropdownItemProps, DropdownProps } from '@heroui/react';
+/**
+ * Primary UI component for Dashboard Navbars
+ */
+interface NavbarNavigationItem {
+    label: string;
+    link: string;
+    onClick?: React.MouseEventHandler;
+    icon?: React.ReactNode;
+    endContent?: React.ReactNode;
+    badgeContent?: React.ReactNode;
+}
+interface NavbarItemUser {
+    avatar?: AvatarProps & AvatarImageProps;
+    name: string;
+    description?: string;
+    dropdown?: Omit<DropdownProps, 'children'>;
+    dropdownItems?: (Omit<DropdownItemProps, 'children'> & {
+        label: string;
+    })[];
+}
+export interface NavbarProps {
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    navigation?: NavbarNavigationItem[];
+    user?: NavbarItemUser;
+    currentPath?: string;
+}
+export declare const Navbar: React.FC<NavbarProps>;
+export {};

package/fragments/navbar/Navbar.js

@@ -0,0 +1,26 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, Badge, Button, Dropdown, ScrollShadow, Tabs, Tooltip } from '@heroui/react';
+import { IconDots } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import { useFragmentUI } from '../../context';
+import { navbar } from './Navbar.styles';
+const getActiveNav = (currentPath, navigation) => {
+    if (!currentPath)
+        return;
+    const possibleMatches = navigation.filter((navItem) => navItem.link.startsWith(currentPath)).sort((a, b) => b.link.length - a.link.length);
+    return possibleMatches.find((pMatch) => pMatch.link === currentPath) || possibleMatches[0];
+};
+export const Navbar = ({ navigation, user, startContent, endContent, currentPath }) => {
+    const v = navbar();
+    const { linkComponent: LinkComponent } = useFragmentUI();
+    const [activeNav, setActiveNav] = useState(getActiveNav(currentPath, navigation ?? []));
+    useEffect(() => setActiveNav(getActiveNav(currentPath, navigation ?? [])), [currentPath, navigation]);
+    const overflowItems = (navigation ?? []).slice(4);
+    const isOverflowActive = overflowItems.some((item) => activeNav?.link === item.link);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: v.topbar(), children: [startContent, _jsx(ScrollShadow, { hideScrollBar: true, orientation: "horizontal", className: v.tabs(), children: _jsx(Tabs, { selectedKey: activeNav?.label, onSelectionChange: (key) => {
+                                const nav = navigation?.find((item) => item.label === key);
+                                setActiveNav(nav);
+                            }, children: _jsx(Tabs.ListContainer, { children: _jsx(Tabs.List, { children: navigation?.map((item) => (_jsxs(Tabs.Tab, { id: item.label, className: v.tab(), render: (domProps) => _jsx(LinkComponent, { ...domProps, href: item.link }), children: [item.label, _jsx(Tabs.Indicator, {})] }, item.label))) }) }) }) }), _jsxs("div", { className: v.end(), children: [endContent, user && (_jsxs(Dropdown, { ...user.dropdown, children: [_jsx(Dropdown.Trigger, { children: _jsxs(Avatar, { ...user.avatar, children: [_jsx(Avatar.Image, { ...user.avatar }), _jsx(Avatar.Fallback, { children: user.name.charAt(0) })] }) }), _jsx(Dropdown.Popover, { className: "min-w-[256px]", placement: "bottom start", children: _jsx(Dropdown.Menu, { "aria-label": "User Actions", items: user.dropdownItems || [], children: (dropdownItem) => (_createElement(Dropdown.Item, { ...dropdownItem, key: dropdownItem.label }, dropdownItem.label)) }) })] }))] })] }), _jsxs("nav", { className: v.bottomNav(), children: [navigation?.slice(0, 4).map((navItem) => (_jsxs(Tooltip, { children: [_jsx(Tooltip.Content, { placement: "top", offset: 10, children: navItem.label }), _jsx(Button, { render: (props) => _jsx(LinkComponent, { href: navItem.link, children: _jsx("button", { ...props }) }), isIconOnly: true, variant: activeNav?.link === navItem.link ? 'tertiary' : 'ghost', fullWidth: true, children: _jsxs(Badge.Anchor, { children: [navItem.icon, typeof navItem.badgeContent === 'string' && navItem.badgeContent ? (_jsx(Badge, { variant: "primary", color: "accent", size: "sm", className: v.bottomNavBadge(), children: navItem.badgeContent })) : null] }) })] }, navItem.label))), overflowItems.length > 0 && (_jsxs(Dropdown, { children: [_jsx(Dropdown.Trigger, { children: _jsx(Button, { variant: isOverflowActive ? 'tertiary' : 'ghost', isIconOnly: true, fullWidth: true, children: _jsx(IconDots, {}) }) }), _jsx(Dropdown.Popover, { placement: "top end", children: _jsx(Dropdown.Menu, { "aria-label": "More navigation", children: overflowItems.map((item) => (_jsxs(Dropdown.Item, { href: item.link, children: [item.icon, item.label] }, item.label))) }) })] }))] })] }));
+};
+//# sourceMappingURL=Navbar.js.map

package/fragments/navbar/Navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.js","sourceRoot":"","sources":["../../src/fragments/navbar/Navbar.tsx"],"names":[],"mappings":"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"}