@fragment-build/ui 3.0.11 → 3.1.3

package/README.md

@@ -60,7 +60,7 @@ Fragment UI is a design system and React component library which provides alread
 
 2. Install Fragment UI and its peer dependencies
 ```bash
-npm install -S @fragment-build/ui @heroui/react @heroui/styles
+npm install -S @fragment-build/ui @heroui/react @heroui/styles @teispace/next-themes
 ```
 
 As a next step you must configure the library the way you want to. See [**Configuration**](#🔧-configuration) section.
@@ -129,6 +129,56 @@ const config = {
 export default config;
 ```
 
+Set up your root layout with server-side theme reading to avoid flash of unstyled content:
+
+```tsx
+// app/layout.tsx
+import { FragmentUIProvider } from '@fragment-build/ui';
+import { ThemeProvider } from '@teispace/next-themes';
+import { getTheme } from '@teispace/next-themes/server';
+
+export default async function RootLayout({ children }) {
+  const initialTheme = await getTheme();
+
+  return (
+    <html suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" initialTheme={initialTheme ?? undefined}>
+          <FragmentUIProvider>
+            {children}
+          </FragmentUIProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+Toggle the theme in a client component using the `useTheme` hook:
+
+```tsx
+// components/ThemeToggle.tsx
+'use client';
+import { useTheme } from '@teispace/next-themes';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+      Toggle theme
+    </button>
+  );
+}
+```
+
+Or use the built-in `ThemeSwitch` component:
+
+```tsx
+import { ThemeSwitch } from '@fragment-build/ui';
+
+<ThemeSwitch />
+```
+
 ## 🤝 Contributing
 
 Feel free to fork and make a Pull Request to this project. All the input is warmly welcome!

package/components/code/Code.d.ts

@@ -0,0 +1,5 @@
+export interface CodeProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Code: React.FC<CodeProps>;

package/components/code/Code.js

@@ -0,0 +1,4 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Code = ({ children, className }) => (_jsx("code", { className: `fragment-code ${className ?? ''}`, children: children }));
+//# sourceMappingURL=Code.js.map

package/components/code/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/components/code/Code.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAOb,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACpE,eAAM,SAAS,EAAE,iBAAiB,SAAS,IAAI,EAAE,EAAE,YAChD,QAAQ,GACJ,CACR,CAAC"}

package/components/code/code.css

@@ -0,0 +1,5 @@
+@layer components {
+  .fragment-code {
+    @apply px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap rounded-sm bg-default/40 text-default-foreground text-sm;
+  }
+}

package/components/code-snippet/CodeSnippet.d.ts

@@ -0,0 +1,5 @@
+export interface CodeSnippetProps {
+    code: string;
+    prefix?: string;
+}
+export declare const CodeSnippet: React.FC<CodeSnippetProps>;

package/components/code-snippet/CodeSnippet.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Tooltip } from '@heroui/react';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+export const CodeSnippet = ({ code, prefix = '$' }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    return (_jsxs("div", { className: "fragment-code-snippet", children: [_jsxs("pre", { className: "fragment-code-snippet__code", children: [prefix && _jsxs("span", { className: "fragment-code-snippet__prefix", children: [prefix, " "] }), code] }), _jsxs(Tooltip, { children: [_jsx(Button, { isIconOnly: true, "aria-label": "Copy to clipboard", size: "sm", variant: "ghost", onPress: handleCopy, children: copied ? _jsx(IconCheck, { size: 14 }) : _jsx(IconCopy, { size: 14 }) }), _jsx(Tooltip.Content, { children: copied ? 'Copied!' : 'Copy to clipboard' })] })] }));
+};
+//# sourceMappingURL=CodeSnippet.js.map

package/components/code-snippet/CodeSnippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippet.js","sourceRoot":"","sources":["../../src/components/code-snippet/CodeSnippet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAO1D,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE;IAChF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC5B,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC1C,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAK,SAAS,EAAC,6BAA6B,aACzC,MAAM,IAAI,gBAAM,SAAS,EAAC,+BAA+B,aAAE,MAAM,SAAS,EAC1E,IAAI,IACD,EACN,MAAC,OAAO,eACN,KAAC,MAAM,IACL,UAAU,sBACC,mBAAmB,EAC9B,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,UAAU,YAElB,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GACnD,EACT,KAAC,OAAO,CAAC,OAAO,cAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,GAAmB,IACrE,IACN,CACP,CAAC;AACJ,CAAC,CAAC"}

package/components/code-snippet/code-snippet.css

@@ -0,0 +1,13 @@
+@layer components {
+  .fragment-code-snippet {
+    @apply inline-flex items-center gap-2 rounded-lg bg-default pr-2;
+  }
+
+  .fragment-code-snippet__code {
+    @apply text-sm font-mono pl-4 py-3;
+  }
+
+  .fragment-code-snippet__prefix {
+    @apply text-muted;
+  }
+}

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

@@ -1,6 +1,3 @@
 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

@@ -1,17 +1,10 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from 'next-themes';
+import { useTheme } from '@teispace/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 }) }));
+    const { resolvedTheme, setTheme } = useTheme();
+    return (_jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", onPress: () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light'), ...props, children: resolvedTheme === 'light' ? _jsx(IconSun, { size: 18 }) : _jsx(IconMoon, { size: 18 }) }));
 };
 //# sourceMappingURL=ThemeSwitch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitch.js","sourceRoot":"","sources":["../../src/components/theme-switch/ThemeSwitch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,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"}
+{"version":3,"file":"ThemeSwitch.js","sourceRoot":"","sources":["../../src/components/theme-switch/ThemeSwitch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAQ,EAAE,MAAM,EAAoB,MAAM,eAAe,CAAC;AAI1D,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/C,OAAO,CACL,KAAC,MAAM,IAAC,UAAU,QAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAM,KAAK,YAC7H,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GACpE,CACV,CAAC;AACJ,CAAC,CAAC"}

package/index.css

@@ -26,6 +26,30 @@
     @apply border border-border px-6 py-4 shadow-none;
   }
 
+  .input-group, .search-field__group, .number-field__group{
+    @apply border border-border shadow-none h-auto;
+
+    .input-group__input, .search-field__input, .number-field__input {
+      @apply px-6 py-4;
+    }
+  }
+
+  .slider {
+    .slider__thumb {
+      @apply bg-transparent;
+    }
+    &[data-orientation="horizontal"] {
+      .slider__track {
+        @apply h-1;
+      }
+    }
+    &[data-orientation="vertical"] {
+      .slider__track {
+        @apply w-1;
+      }
+    }
+  }
+
   .select__indicator {
     @apply right-4;
   }
@@ -88,6 +112,8 @@
 @import "./fragments/widget/widget.css";
 @import "./components/grid/grid.css";
 @import "./components/multi-switch/multi-switch.css";
+@import "./components/code/code.css";
+@import "./components/code-snippet/code-snippet.css";
 @import "./fragments/form/form.css";
 @import "./fragments/form/form-section.css";
 

package/index.d.ts

@@ -1,5 +1,6 @@
-export { useTheme } from 'next-themes';
 export { FragmentUIProvider } from './provider';
+export { Code, type CodeProps } from './components/code/Code';
+export { CodeSnippet, type CodeSnippetProps } from './components/code-snippet/CodeSnippet';
 export { Grid, type GridProps } from './components/grid/Grid';
 export { MultiSwitch, type MultiSwitchProps } from './components/multi-switch/MultiSwitch';
 export { ThemeSwitch, type ThemeSwitchProps } from './components/theme-switch/ThemeSwitch';

package/index.js

@@ -1,7 +1,8 @@
 // TODO: export as utils.ts
-export { useTheme } from 'next-themes';
 export { FragmentUIProvider } from './provider';
 // fragment components
+export { Code } from './components/code/Code';
+export { CodeSnippet } from './components/code-snippet/CodeSnippet';
 export { Grid } from './components/grid/Grid';
 export { MultiSwitch } from './components/multi-switch/MultiSwitch';
 export { ThemeSwitch } from './components/theme-switch/ThemeSwitch';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,sBAAsB;AACtB,OAAO,EAAE,IAAI,EAAkB,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAyB,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAyB,MAAO,uCAAuC,CAAC;AAE5F,OAAO,EAAE,IAAI,EAAkB,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAyB,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,UAAU,EAAwB,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAmB,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAqB,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,sBAAsB;AACtB,OAAO,EAAE,IAAI,EAAkB,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAyB,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAkB,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAyB,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAyB,MAAO,uCAAuC,CAAC;AAE5F,OAAO,EAAE,IAAI,EAAkB,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAyB,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,UAAU,EAAwB,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAmB,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAqB,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragment-build/ui",
-  "version": "3.0.11",
+  "version": "3.1.3",
   "type": "module",
   "engines": {
     "node": ">=22"
@@ -16,6 +16,7 @@
   "peerDependencies": {
     "@heroui/react": ">=3.0.0",
     "@heroui/styles": ">=3.0.0",
+    "@teispace/next-themes": ">=0.5.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": ">=4.0.0"
@@ -23,7 +24,6 @@
   "dependencies": {
     "@tabler/icons-react": "3.44.0",
     "apexcharts": "5.12.0",
-    "next-themes": "0.4.6",
     "react-apexcharts": "2.1.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "4.3.0"
@@ -31,6 +31,7 @@
   "devDependencies": {
     "@heroui/react": "3.0.5",
     "@heroui/styles": "3.0.5",
+    "@teispace/next-themes": "0.5.0",
     "@storybook/addon-a11y": "10.4.0",
     "@storybook/addon-docs": "10.4.0",
     "@storybook/addon-links": "10.4.0",

package/provider.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider } from 'next-themes';
 import { FragmentUIContext } from './context';
 export const FragmentUIProvider = ({ children, linkComponent = 'a', }) => {
-    return (_jsx(FragmentUIContext.Provider, { value: { linkComponent }, children: _jsx(ThemeProvider, { attribute: "class", children: children }) }));
+    return (_jsx(FragmentUIContext.Provider, { value: { linkComponent }, children: children }));
 };
 //# sourceMappingURL=provider.js.map

package/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["src/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAsB,MAAM,WAAW,CAAC;AAOlE,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,EACR,aAAa,GAAG,GAAG,GACpB,EAAE,EAAE;IACH,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,YAClD,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,YAC7B,QAAQ,GACK,GACW,CAC9B,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["src/provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,iBAAiB,EAAsB,MAAM,WAAW,CAAC;AAOlE,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,QAAQ,EACR,aAAa,GAAG,GAAG,GACpB,EAAE,EAAE;IACH,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,YACjD,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC,CAAC"}

package/src/components/code/code.css

@@ -0,0 +1,5 @@
+@layer components {
+  .fragment-code {
+    @apply px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap rounded-sm bg-default/40 text-default-foreground text-sm;
+  }
+}

package/src/components/code-snippet/code-snippet.css

@@ -0,0 +1,13 @@
+@layer components {
+  .fragment-code-snippet {
+    @apply inline-flex items-center gap-2 rounded-lg bg-default pr-2;
+  }
+
+  .fragment-code-snippet__code {
+    @apply text-sm font-mono pl-4 py-3;
+  }
+
+  .fragment-code-snippet__prefix {
+    @apply text-muted;
+  }
+}

package/src/index.css

@@ -26,6 +26,30 @@
     @apply border border-border px-6 py-4 shadow-none;
   }
 
+  .input-group, .search-field__group, .number-field__group{
+    @apply border border-border shadow-none h-auto;
+
+    .input-group__input, .search-field__input, .number-field__input {
+      @apply px-6 py-4;
+    }
+  }
+
+  .slider {
+    .slider__thumb {
+      @apply bg-transparent;
+    }
+    &[data-orientation="horizontal"] {
+      .slider__track {
+        @apply h-1;
+      }
+    }
+    &[data-orientation="vertical"] {
+      .slider__track {
+        @apply w-1;
+      }
+    }
+  }
+
   .select__indicator {
     @apply right-4;
   }
@@ -88,6 +112,8 @@
 @import "./fragments/widget/widget.css";
 @import "./components/grid/grid.css";
 @import "./components/multi-switch/multi-switch.css";
+@import "./components/code/code.css";
+@import "./components/code-snippet/code-snippet.css";
 @import "./fragments/form/form.css";
 @import "./fragments/form/form-section.css";