@reactberry/system 2.0.0-beta

package/src/icons/index.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+
+export interface DesignSystemIconProps extends React.SVGProps<SVGSVGElement> {
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+  fill?: string;
+  props?: { [key: string]: any };
+}
+
+export const Icon24Folder = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><path fill="none" stroke="currentColor" strokeWidth={2} d="M21,22H3a2,2,0,0,1-2-2V2H9l3,4H23V20A2,2,0,0,1,21,22Z" /></g></svg>
+);
+
+export const IconArrowLeft = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={22} x2={2} y1={12} y2={12} fill="none" stroke="currentColor" strokeWidth={2} data-cap="butt" data-color="color-2" /><polyline fill="none" stroke="currentColor" strokeWidth={2} points="9,19 2,12 9,5 " /></g></svg>
+);
+
+export const IconArrowRight = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={2} x2={22} y1={12} y2={12} fill="none" stroke="currentColor" strokeWidth={2} data-cap="butt" data-color="color-2" /><polyline fill="none" stroke="currentColor" strokeWidth={2} points="15,5 22,12 15,19 " /></g></svg>
+);
+
+export const IconArrowSmDown = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><polyline fill="none" stroke="currentColor" strokeWidth={2} points="16,10 12,14 8,10 " transform="translate(0, 0)" /></g></svg>
+);
+
+export const IconArrowSmRight = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><polyline fill="none" stroke="currentColor" strokeWidth={2} points="10,8 14,12 10,16 " transform="translate(0, 0)" /></g></svg>
+);
+
+export const IconBan = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={19.8} x2={4.2} y1={4.2} y2={19.8} fill="none" stroke="currentColor" strokeWidth={2} data-cap="butt" /><circle cx={12} cy={12} r={11} fill="none" stroke="currentColor" strokeWidth={2} /></g></svg>
+);
+
+export const IconCCheck = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><polyline fill="none" stroke="currentColor" strokeWidth={2} points=" 6,12 10,16 18,8 " data-color="color-2" /><circle cx={12} cy={12} r={11} fill="none" stroke="currentColor" strokeWidth={2} /></g></svg>
+);
+
+export const IconDCheck = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><polyline fill="none" stroke="currentColor" strokeWidth={2} points="6,12 10,16 18,8 " /></g></svg>
+);
+
+export const IconDocFolder = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><path fill="none" stroke="currentColor" strokeWidth={2} d="M3,22a2.006,2.006,0,0,1-2-2V2H7L9,5H20V6" data-color="color-2" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M5,9V20a2.006,2.006,0,0,1-2,2H21a2.006,2.006,0,0,0,2-2V9Z" /></g></svg>
+);
+
+export const IconDotsAnim = ({ width, height, color, ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} {...props}><g fill="currentColor" className="nc-icon-wrapper"><g className="nc-loop-dots-24-icon-f"><circle cx={4} cy={12} r={3} fill="currentColor" /><circle cx={12} cy={12} r={3} fill="currentColor" data-color="color-2" /><circle cx={20} cy={12} r={3} fill="currentColor" /></g><style>{".nc-loop-dots-24-icon-f{--animation-duration:1s}.nc-loop-dots-24-icon-f *{opacity:.4transform:scale(.7)}.nc-loop-dots-24-icon-f :nth-child(1),.nc-loop-dots-24-icon-f :nth-child(3){animation:nc-loop-dots-anim-2b var(--animation-duration) infinite linear}.nc-loop-dots-24-icon-f :nth-child(1){transform-origin:4px 12px}.nc-loop-dots-24-icon-f :nth-child(2){animation:nc-loop-dots-anim-1b calc(var(--animation-duration)/2) infinite linear;animation-delay:calc(var(--animation-duration)/4);transform-origin:12px 12px}.nc-loop-dots-24-icon-f :nth-child(3){animation-delay:calc(var(--animation-duration)/2);transform-origin:20px 12px}@keyframes nc-loop-dots-anim-1b{0%,100%{opacity:.4;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}@keyframes nc-loop-dots-anim-2b{0%,100%,66%{opacity:.4;transform:scale(.7)}33%{opacity:1;transform:scale(1)}}"}</style></g></svg>
+);
+
+export const IconDownloadData = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={12} x2={12} y1={6} y2={17} fill="none" stroke="currentColor" strokeWidth={2} data-cap="butt" data-color="color-2" /><polyline fill="none" stroke="currentColor" strokeWidth={2} points="8 13 12 17 16 13" data-color="color-2" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M2,8V4A2,2,0,0,1,4,2H8" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M16,2h4a2,2,0,0,1,2,2V8" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M22,16v4a2,2,0,0,1-2,2H16" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M8,22H4a2,2,0,0,1-2-2V16" /></g></svg>
+);
+
+export const IconEAdd = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={12} x2={12} y1={2} y2={22} fill="none" stroke="currentColor" strokeWidth={2} /><line x1={22} x2={2} y1={12} y2={12} fill="none" stroke="currentColor" strokeWidth={2} /></g></svg>
+);
+
+export const IconERemove = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" className="nc-icon-wrapper"><path fill="currentColor" d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z" /></g></svg>
+);
+
+export const IconFile = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill={fill} className="svgicon" viewBox="0 0 16 16" width={width} height={height} color={color} {...props}><path fill="currentColor" fillRule="evenodd" d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clipRule="evenodd" /></svg>
+);
+
+export const IconGear = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><path fill="none" stroke="currentColor" strokeWidth={2} d="M23,12c0-1.105-0.895-2-2-2 h-1.262c-0.189-0.732-0.477-1.422-0.852-2.058l0.892-0.892c0.781-0.781,0.781-2.047,0-2.828c-0.781-0.781-2.047-0.781-2.828,0 l-0.892,0.892C15.422,4.739,14.732,4.451,14,4.262V3c0-1.104-0.895-2-2-2c-1.105,0-2,0.895-2,2v1.262 C9.268,4.451,8.578,4.739,7.942,5.114L7.05,4.222c-0.781-0.781-2.047-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828l0.892,0.892 C4.739,8.578,4.451,9.268,4.262,10H3c-1.104,0-2,0.895-2,2c0,1.105,0.895,2,2,2h1.262c0.189,0.732,0.477,1.422,0.852,2.058 L4.222,16.95c-0.781,0.781-0.781,2.047,0,2.828c0.781,0.781,2.047,0.781,2.828,0l0.892-0.892c0.635,0.375,1.326,0.663,2.058,0.852 V21c0,1.104,0.895,2,2,2c1.105,0,2-0.895,2-2v-1.262c0.732-0.189,1.422-0.477,2.058-0.852l0.892,0.892 c0.781,0.781,2.047,0.781,2.828,0c0.781-0.781,0.781-2.047,0-2.828l-0.892-0.892c0.375-0.635,0.663-1.326,0.852-2.058H21 C22.104,14,23,13.105,23,12z" /><circle cx={12} cy={12} r={3} fill="none" stroke="currentColor" strokeWidth={2} data-color="color-2" /></g></svg>
+);
+
+export const IconLaunch = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={11} x2={22} y1={13} y2={2} fill="none" stroke="currentColor" strokeWidth={2} data-cap="butt" data-color="color-2" /><polyline fill="none" stroke="currentColor" strokeWidth={2} points="14 2 22 2 22 10" data-color="color-2" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M9,4H4A2,2,0,0,0,2,6V20a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V15" /></g></svg>
+);
+
+export const IconLock = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><rect width={18} height={12} x={3} y={11} fill="none" stroke="currentColor" strokeWidth={2} rx={2} /><circle cx={12} cy={17} r={2} fill="none" stroke="currentColor" strokeWidth={2} data-color="color-2" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" data-color="color-2" /></g></svg>
+);
+
+export const IconMove3 = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" className="nc-icon-wrapper"><circle cx={12} cy={12} r={3} fill="currentColor" data-color="color-2" /><path fill="currentColor" d="M12.372.165a.52.52,0,0,0-.744,0l-4.5,5A.5.5,0,0,0,7.5,6h9a.5.5,0,0,0,.372-.835Z" /><path fill="currentColor" d="M18.834,7.128a.508.508,0,0,0-.538-.085A.5.5,0,0,0,18,7.5v9a.5.5,0,0,0,.3.457.522.522,0,0,0,.2.043.5.5,0,0,0,.334-.128l5-4.5a.5.5,0,0,0,0-.744Z" /><path fill="currentColor" d="M16.5,18h-9a.5.5,0,0,0-.372.835l4.5,5a.5.5,0,0,0,.744,0l4.5-5A.5.5,0,0,0,16.5,18Z" /><path fill="currentColor" d="M5.7,7.043a.509.509,0,0,0-.538.085l-5,4.5a.5.5,0,0,0,0,.744l5,4.5A.5.5,0,0,0,5.5,17a.522.522,0,0,0,.2-.043A.5.5,0,0,0,6,16.5v-9A.5.5,0,0,0,5.7,7.043Z" /></g></svg>
+);
+
+export const IconOWarning = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><polygon fill="none" stroke="currentColor" strokeWidth={2} points="16.556 1 7.444 1 1 7.444 1 16.556 7.444 23 16.556 23 23 16.556 23 7.444 16.556 1" /><line x1={12} x2={12} y1={7} y2={13} fill="none" stroke="currentColor" strokeWidth={2} data-color="color-2" /><circle cx={12} cy={17} r={1} fill="currentColor" stroke="none" data-color="color-2" data-stroke="none" /></g></svg>
+);
+
+export const IconPencil = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={14.328} x2={19.328} y1={4.672} y2={9.672} fill="none" stroke="currentColor" strokeWidth={2} data-cap="butt" data-color="color-2" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M8,21,2,22l1-6L16.414,2.586a2,2,0,0,1,2.828,0l2.172,2.172a2,2,0,0,1,0,2.828Z" /></g></svg>
+);
+
+export const IconText = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={3} x2={21} y1={2} y2={2} fill="none" stroke="currentColor" strokeWidth={2} /><line x1={12} x2={12} y1={2} y2={22} fill="none" stroke="currentColor" strokeWidth={2} /></g></svg>
+);
+
+export const IconUpload = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><line x1={12} x2={12} y1={2} y2={16} fill="none" stroke="currentColor" strokeWidth={2} data-cap="butt" data-color="color-2" /><polyline fill="none" stroke="currentColor" strokeWidth={2} points="8 6 12 2 16 6" data-color="color-2" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M17,10h3a2,2,0,0,1,2,2v8a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V12a2,2,0,0,1,2-2H7" /></g></svg>
+);
+
+export const IconUserFocus = ({ width, height, color, fill = "currentColor", ...props }: DesignSystemIconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} className="svgicon" viewBox="0 0 24 24" color={color} fill={fill} {...props}><g fill="currentColor" strokeLinecap="round" strokeLinejoin="round" className="nc-icon-wrapper"><path fill="none" stroke="currentColor" strokeWidth={2} d="M12,13h0c-2.485,0-4.5,2.015-4.5,4.5v.5h9v-.5c0-2.485-2.015-4.5-4.5-4.5Z" data-color="color-2" /><circle cx={12} cy={7.5} r={2.5} fill="none" stroke="currentColor" strokeWidth={2} data-color="color-2" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M2,8V4c0-1.105,.895-2,2-2h4" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M16,2h4c1.105,0,2,.895,2,2v4" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M22,16v4c0,1.105-.895,2-2,2h-4" /><path fill="none" stroke="currentColor" strokeWidth={2} d="M8,22H4c-1.105,0-2-.895-2-2v-4" /></g></svg>
+);
+
+export const designSystemIcons = {
+  Icon24Folder,
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowSmDown,
+  IconArrowSmRight,
+  IconBan,
+  IconCCheck,
+  IconDCheck,
+  IconDocFolder,
+  IconDotsAnim,
+  IconDownloadData,
+  IconEAdd,
+  IconERemove,
+  IconFile,
+  IconGear,
+  IconLaunch,
+  IconLock,
+  IconMove3,
+  IconOWarning,
+  IconPencil,
+  IconText,
+  IconUpload,
+  IconUserFocus,
+} as const;
+
+export type DesignSystemIconName = keyof typeof designSystemIcons;

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from "./elements";
+export * from "./blocks";
+export * from "./charts";
+export * from "./hooks/useBreakpoint";
+export * from "./hooks/useHoverList";
+export * from "./hooks/useKeypress";
+export * from "./hooks/useOverlay";
+export * from "./hooks/useReducedMotion";
+export * from "./hooks/useTouchDevice";
+export * from "./themes";
+export * from "./types";
+export * from "./providers";

package/src/providers/DesignSystemProvider.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { PropsWithChildren, useEffect, useMemo } from "react";
+import { ThemeProvider } from "styled-components";
+
+import GlobalStyles from "@/themes/default/global";
+import { themes, type ThemeName } from "@/themes";
+import { setCurrentTheme } from "@/themes/default/utils";
+import StyledComponentsRegistry from "./StyledComponentsRegistry";
+
+interface DesignSystemProviderProps extends PropsWithChildren {
+  themeName?: ThemeName;
+  withGlobalStyles?: boolean;
+}
+
+export default function DesignSystemProvider({
+  children,
+  themeName = "light",
+  withGlobalStyles = true,
+}: DesignSystemProviderProps) {
+  const theme = useMemo(() => themes[themeName] ?? themes.light, [themeName]);
+
+  useEffect(() => {
+    setCurrentTheme(theme);
+  }, [theme]);
+
+  return (
+    <StyledComponentsRegistry>
+      <ThemeProvider theme={theme}>
+        {withGlobalStyles ? <GlobalStyles /> : null}
+        {children}
+      </ThemeProvider>
+    </StyledComponentsRegistry>
+  );
+}

package/src/providers/StyledComponentsRegistry.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager
+      sheet={styledComponentsStyleSheet.instance}
+      shouldForwardProp={() => true}
+    >
+      {children}
+    </StyleSheetManager>
+  );
+}

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export { default as DesignSystemProvider } from "./DesignSystemProvider";
+export { default as StyledComponentsRegistry } from "./StyledComponentsRegistry";

package/src/themes/README.md

@@ -0,0 +1,30 @@
+# Documentation Moved
+
+The design system themes documentation has been moved to:
+
+**📄 [src/docs/themes.md](../docs/themes.md)**
+
+## New Documentation Structure
+
+All design system documentation is now centralized in the `src/docs/` folder for better organization and easier AI reference:
+
+- **[docs/elements.md](../docs/elements.md)** - Core components (Box, Text, Button, Field)
+- **[docs/blocks.md](../docs/blocks.md)** - Composed components (Card, Modal, etc.)
+- **[docs/themes.md](../docs/themes.md)** - Theme system and customization
+- **[docs/README.md](../docs/README.md)** - Complete overview and getting started
+- **[docs/index.md](../docs/index.md)** - Quick reference for AI assistants
+
+## Quick Access
+
+For the comprehensive themes documentation including:
+- Theme Structure and Organization
+- Color System and Palettes
+- Typography Scales
+- Spacing and Sizing Tokens
+- Component Skins and Variants
+- Light/Dark Mode Configuration
+- Theme Customization Guide
+- Token Usage Examples
+- Best Practices
+
+👉 **Go to: [../docs/themes.md](../docs/themes.md)**

package/src/themes/default/assets/badge-avatar.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { motion } from "motion/react"
+import Box, { BoxProps } from "@/design-system/elements/box"
+
+type BadgeAvatarProps = BoxProps & {
+  /** Flip the smile upside down to show a sad face. */
+  sad?: boolean
+}
+
+export default function BadgeAvatar({ sad = false, ...rest }: BadgeAvatarProps) {
+  return (
+    <Box
+      as="svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 600 650"
+      fill="none"
+      color="primary"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M536 54H429.252C396.248 20.6763 350.496 0 300 0C249.505 0 203.753 20.6763 170.749 54H64C28.6538 54 0 82.6538 0 118V414.03C0 443.503 14.4307 471.108 38.6318 487.931L248.632 633.901C279.514 655.367 320.486 655.367 351.368 633.901L561.368 487.931C585.569 471.108 600 443.503 600 414.03V118C600 82.6538 571.346 54 536 54Z"
+        fill="currentColor"
+      />
+      <path
+        d="M515.449 490.621L337.67 614.195C326.559 621.918 313.532 626.001 300 626.001C286.468 626.001 273.441 621.918 262.33 614.195L84.5508 490.621C143.32 426.748 224.172 390 299.999 390C375.828 390 456.68 426.748 515.449 490.621ZM458 182C458 269.122 387.122 340 300 340C212.878 340 142 269.122 142 182C142 94.8784 212.878 24 300 24C387.122 24 458 94.8784 458 182Z"
+        fill="white"
+      />
+      <motion.path
+        d="M245.009 239.029C247.229 236.809 250.773 236.679 253.155 238.724C280.05 261.817 319.945 261.817 346.84 238.724C349.218 236.682 352.77 236.813 354.986 239.029L367.749 251.795C368.92 252.966 369.555 254.57 369.504 256.226C369.452 257.882 368.717 259.441 367.476 260.539C328.998 294.553 270.997 294.553 232.519 260.539C231.278 259.442 230.547 257.882 230.495 256.227C230.443 254.572 231.075 252.965 232.245 251.795L245.009 239.029Z"
+        fill="currentColor"
+        initial={{ scale: 0, scaleY: 0, opacity: 0 }}
+        animate={{ scale: 1, scaleY: sad ? -1 : 1, opacity: 1 }}
+        transition={{
+          duration: 0.5,
+          delay: 0.3,
+          ease: "backOut",
+        }}
+        style={{ transformOrigin: "300px 260px", transformBox: "fill-box" }}
+      />
+    </Box>
+  )
+}

package/src/themes/default/assets/logo.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Box, BoxProps } from "@/design-system/elements";
+
+type LogoProps = BoxProps & {};
+
+const Logofull = (
+  <g>
+    <g id="logogram" transform="translate(0, 3.5) rotate(0)">
+      <path
+        d="M0 20C0 10.572 9.53674e-07 5.857 2.929 2.929C5.857 9.53674e-07 10.571 0 20 0C29.428 0 34.142 9.53674e-07 37.071 2.929C40 5.857 40 10.572 40 20C40 29.428 40 34.142 37.071 37.071C34.142 40 29.428 40 20 40C10.571 40 5.857 40 2.929 37.071C9.53674e-07 34.142 0 29.428 0 20Z"
+        fill="CurrentColor"
+      />
+      <path
+        d="M26.668 17.6251C27.528 17.3941 27.68 16.2381 26.909 15.7931L26.402 15.5001C25.923 15.2241 25.752 14.6 26.138 14.205C26.544 13.789 27.039 13.4641 27.591 13.2561C28.457 12.9301 29.409 12.914 30.285 13.212C31.162 13.509 31.908 14.1021 32.396 14.8871C32.885 15.6731 33.086 16.604 32.965 17.522C32.845 18.439 32.409 19.2871 31.734 19.9191C31.059 20.5521 30.185 20.9311 29.261 20.9911C28.338 21.0521 27.422 20.7901 26.67 20.2511C26.191 19.9081 25.797 19.4651 25.512 18.9591C25.242 18.4771 25.568 17.9191 26.102 17.7761L26.668 17.6251ZM13.897 17.7761C14.431 17.9191 14.757 18.4771 14.487 18.9591C14.202 19.4651 13.808 19.9081 13.329 20.2511C12.577 20.7901 11.661 21.0521 10.738 20.9911C9.81499 20.9311 8.94098 20.5521 8.26498 19.9191C7.58998 19.2871 7.15499 18.439 7.03399 17.522C6.91299 16.604 7.114 15.6731 7.603 14.8871C8.091 14.1021 8.83799 13.509 9.71399 13.212C10.59 12.914 11.542 12.9301 12.409 13.2561C12.96 13.4641 13.455 13.789 13.861 14.205C14.247 14.6 14.076 15.2241 13.598 15.5001L13.09 15.7931C12.319 16.2381 12.471 17.3941 13.331 17.6251L13.897 17.7761ZM23.999 26.0001C24.552 26.0001 25.01 26.4521 24.9 26.9931C24.706 27.9491 24.235 28.835 23.535 29.535C22.597 30.473 21.326 31.0001 19.999 31.0001C18.673 31.0001 17.402 30.473 16.464 29.535C15.764 28.835 15.293 27.9491 15.099 26.9931C14.989 26.4521 15.447 26.0001 15.999 26.0001H23.999Z"
+        fill="CurrentColor"
+      />
+    </g>
+    <g id="logotype" transform="translate(46, 0)">
+      <path
+        fill="CurrentColor"
+        d="M14.52 38.60L9.04 38.60L9.04 10.60L19.44 10.60Q22.40 10.60 24.68 11.78Q26.96 12.96 28.24 15.06Q29.52 17.16 29.52 19.92L29.52 19.92Q29.52 22.64 28.28 24.76Q27.04 26.88 24.88 28.10Q22.72 29.32 19.88 29.32L19.88 29.32L14.52 29.32L14.52 38.60ZM14.52 15.60L14.52 24.28L19.76 24.28Q21.60 24.28 22.78 23.06Q23.96 21.84 23.96 19.92L23.96 19.92Q23.96 18 22.66 16.80Q21.36 15.60 19.32 15.60L19.32 15.60L14.52 15.60ZM40.40 39.08L40.40 39.08Q37.36 39.08 34.98 37.74Q32.60 36.40 31.26 34.04Q29.92 31.68 29.92 28.60L29.92 28.60Q29.92 25.52 31.24 23.16Q32.56 20.80 34.92 19.46Q37.28 18.12 40.32 18.12L40.32 18.12Q43.40 18.12 45.76 19.46Q48.12 20.80 49.44 23.16Q50.76 25.52 50.76 28.60L50.76 28.60Q50.76 31.68 49.44 34.04Q48.12 36.40 45.78 37.74Q43.44 39.08 40.40 39.08ZM40.40 34.20L40.40 34.20Q41.88 34.20 43 33.48Q44.12 32.76 44.74 31.50Q45.36 30.24 45.36 28.60L45.36 28.60Q45.36 26.96 44.72 25.70Q44.08 24.44 42.94 23.72Q41.80 23 40.32 23L40.32 23Q38.88 23 37.74 23.72Q36.60 24.44 35.96 25.70Q35.32 26.96 35.32 28.60L35.32 28.60Q35.32 30.24 35.96 31.50Q36.60 32.76 37.76 33.48Q38.92 34.20 40.40 34.20ZM62.88 39.08L62.88 39.08Q59.76 39.08 57.32 37.74Q54.88 36.40 53.52 34.02Q52.16 31.64 52.16 28.60L52.16 28.60Q52.16 25.52 53.52 23.16Q54.88 20.80 57.28 19.46Q59.68 18.12 62.80 18.12L62.80 18.12Q65.80 18.12 68.28 19.60Q70.76 21.08 71.88 23.88L71.88 23.88L66.92 25.64Q66.36 24.48 65.18 23.78Q64.00 23.08 62.56 23.08L62.56 23.08Q61.08 23.08 59.96 23.78Q58.84 24.48 58.20 25.72Q57.56 26.96 57.56 28.60L57.56 28.60Q57.56 30.24 58.20 31.46Q58.84 32.68 60.00 33.40Q61.16 34.12 62.64 34.12L62.64 34.12Q64.08 34.12 65.26 33.36Q66.44 32.60 67 31.36L67 31.36L72 33.12Q70.84 35.96 68.38 37.52Q65.92 39.08 62.88 39.08ZM92.48 18.60L79.12 33.52L75.96 29.88L86.20 18.60L92.48 18.60ZM79.36 38.60L74.08 38.60L74.08 10.60L79.36 10.60L79.36 38.60ZM93.08 38.60L86.88 38.60L80.24 28.92L83.68 25.28L93.08 38.60ZM102.60 39.08L102.60 39.08Q99.64 39.08 97.36 37.74Q95.08 36.40 93.78 34.04Q92.48 31.68 92.48 28.60L92.48 28.60Q92.48 25.52 93.82 23.16Q95.16 20.80 97.50 19.46Q99.84 18.12 102.88 18.12L102.88 18.12Q105.52 18.12 107.74 19.50Q109.96 20.88 111.30 23.54Q112.64 26.20 112.64 30L112.64 30L97.48 30L97.96 29.52Q97.96 31 98.70 32.10Q99.44 33.20 100.62 33.78Q101.80 34.36 103.16 34.36L103.16 34.36Q104.80 34.36 105.84 33.66Q106.88 32.96 107.44 31.84L107.44 31.84L112.16 33.68Q111.32 35.36 109.98 36.58Q108.64 37.80 106.80 38.44Q104.96 39.08 102.60 39.08ZM98.24 26.56L98.24 26.56L97.76 26.08L107.40 26.08L106.96 26.56Q106.96 25.12 106.28 24.26Q105.60 23.40 104.62 23Q103.64 22.60 102.72 22.60L102.72 22.60Q101.80 22.60 100.76 23Q99.72 23.40 98.98 24.26Q98.24 25.12 98.24 26.56ZM122.96 39.08L122.96 39.08Q119.64 39.08 117.94 37.44Q116.24 35.80 116.24 32.76L116.24 32.76L116.24 12.36L121.52 12.36L121.52 31.60Q121.52 32.88 122.08 33.54Q122.64 34.20 123.72 34.20L123.72 34.20Q124.12 34.20 124.60 34.02Q125.08 33.84 125.60 33.48L125.60 33.48L127.44 37.44Q126.48 38.16 125.30 38.62Q124.12 39.08 122.96 39.08ZM126.52 23.08L113 23.08L113 18.60L126.52 18.60L126.52 23.08ZM155.76 38.60L149.96 38.60L139.24 10.60L144.72 10.60L155.76 38.60ZM133.64 38.60L127.84 38.60L138.88 10.60L144.36 10.60L133.64 38.60ZM150.60 32.44L133.04 32.44L133.04 27.60L150.60 27.60L150.60 32.44ZM165.92 47.12L165.92 47.12Q163.64 47.12 161.88 46.80Q160.12 46.48 158.92 45.96Q157.72 45.44 156.96 44.92L156.96 44.92L159.04 40.68Q159.60 41 160.52 41.42Q161.44 41.84 162.72 42.14Q164 42.44 165.68 42.44L165.68 42.44Q167.28 42.44 168.50 41.82Q169.72 41.20 170.42 39.90Q171.12 38.60 171.12 36.60L171.12 36.60L171.12 18.60L176.40 18.60L176.40 36.44Q176.40 39.80 175.12 42.22Q173.84 44.64 171.50 45.88Q169.16 47.12 165.92 47.12ZM164.88 38.04L164.88 38.04Q162.12 38.04 160.10 36.84Q158.08 35.64 156.96 33.48Q155.84 31.32 155.84 28.36L155.84 28.36Q155.84 25.24 156.96 22.94Q158.08 20.64 160.10 19.38Q162.12 18.12 164.88 18.12L164.88 18.12Q167.28 18.12 169.04 19.38Q170.80 20.64 171.76 22.96Q172.72 25.28 172.72 28.48L172.72 28.48Q172.72 31.36 171.76 33.52Q170.80 35.68 169.04 36.86Q167.28 38.04 164.88 38.04ZM166.40 33.60L166.40 33.60Q167.76 33.60 168.78 32.90Q169.80 32.20 170.36 30.98Q170.92 29.76 170.92 28.20L170.92 28.20Q170.92 26.60 170.34 25.40Q169.76 24.20 168.74 23.52Q167.72 22.84 166.36 22.84L166.36 22.84Q164.96 22.84 163.88 23.52Q162.80 24.20 162.20 25.40Q161.60 26.60 161.56 28.20L161.56 28.20Q161.60 29.76 162.20 30.98Q162.80 32.20 163.90 32.90Q165 33.60 166.40 33.60ZM189 39.08L189 39.08Q186.04 39.08 183.76 37.74Q181.48 36.40 180.18 34.04Q178.88 31.68 178.88 28.60L178.88 28.60Q178.88 25.52 180.22 23.16Q181.56 20.80 183.90 19.46Q186.24 18.12 189.28 18.12L189.28 18.12Q191.92 18.12 194.14 19.50Q196.36 20.88 197.70 23.54Q199.04 26.20 199.04 30L199.04 30L183.88 30L184.36 29.52Q184.36 31 185.10 32.10Q185.84 33.20 187.02 33.78Q188.20 34.36 189.56 34.36L189.56 34.36Q191.20 34.36 192.24 33.66Q193.28 32.96 193.84 31.84L193.84 31.84L198.56 33.68Q197.72 35.36 196.38 36.58Q195.04 37.80 193.20 38.44Q191.36 39.08 189 39.08ZM184.64 26.56L184.64 26.56L184.16 26.08L193.80 26.08L193.36 26.56Q193.36 25.12 192.68 24.26Q192 23.40 191.02 23Q190.04 22.60 189.12 22.60L189.12 22.60Q188.20 22.60 187.16 23Q186.12 23.40 185.38 24.26Q184.64 25.12 184.64 26.56ZM206.40 38.60L201.12 38.60L201.12 18.60L206.08 18.60L206.40 22.28L206.40 38.60ZM219.64 38.60L214.36 38.60L214.36 28.36L219.64 28.36L219.64 38.60ZM219.64 28.36L214.36 28.36Q214.36 26.32 213.90 25.20Q213.44 24.08 212.60 23.58Q211.76 23.08 210.64 23.08L210.64 23.08Q208.60 23.04 207.50 24.32Q206.40 25.60 206.40 28.12L206.40 28.12L204.64 28.12Q204.64 24.92 205.58 22.70Q206.52 20.48 208.22 19.30Q209.92 18.12 212.20 18.12L212.20 18.12Q214.56 18.12 216.24 19.08Q217.92 20.04 218.80 22.06Q219.68 24.08 219.64 27.28L219.64 27.28L219.64 28.36ZM231.08 39.08L231.08 39.08Q227.76 39.08 226.06 37.44Q224.36 35.80 224.36 32.76L224.36 32.76L224.36 12.36L229.64 12.36L229.64 31.60Q229.64 32.88 230.20 33.54Q230.76 34.20 231.84 34.20L231.84 34.20Q232.24 34.20 232.72 34.02Q233.20 33.84 233.72 33.48L233.72 33.48L235.56 37.44Q234.60 38.16 233.42 38.62Q232.24 39.08 231.08 39.08ZM234.64 23.08L221.12 23.08L221.12 18.60L234.64 18.60L234.64 23.08Z"
+      />
+    </g>
+  </g>
+);
+
+export default function Logo({ ...rest }: LogoProps) {
+  return (
+    <Box
+      as="svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 283 47"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      {Logofull}
+    </Box>
+  );
+}

package/src/themes/default/global.ts

@@ -0,0 +1,138 @@
+"use client";
+import { createGlobalStyle } from "styled-components";
+
+const styled = { createGlobalStyle };
+
+const GlobalStyles = styled.createGlobalStyle`
+  :root {
+    --primary: ${(p: any) =>
+      p.theme.colors.transparent.light[2] || "rgba(0, 0, 0, 0.7)"};
+    --secondary: rgba(0, 0, 0, 0.4);
+    --tertiary: rgba(0, 0, 0, 0.1);
+    --code: ${(p) => p.theme.colors.transparent.light[2]};
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    min-height: 100dvh;
+    background-color: ${(p: any) => p.theme.colors?.palette?.blues?.[0] || p.theme.colors.neutral || "white"};
+  }
+
+  *:empty {
+    gap: unset;
+  }
+  body {
+    background-color: ${(p: any) => p.theme.colors?.palette?.blues?.[0] || p.theme.colors.neutral || "white"};
+    font-family: var(--main-font), -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol";
+    padding: 0;
+    margin: 0;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "pnum";
+    font-variant-numeric: proportional-nums;
+  }
+  img,
+  picture,
+  video,
+  canvas {
+    max-width: 100%;
+    max-height: 100%;
+  }
+  iframe {
+    outline: none;
+    border: none;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+  /*
+  a:visited {
+    color: inherit;
+  }
+ a[href^="/"] {
+    color: inherit;
+  }
+   */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  p,
+  figure {
+    margin: 0;
+  }
+  p > code {
+    background: var(--code);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  #root,
+  #__next {
+    isolation: isolate;
+  }
+
+  /* Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--secondary) transparent;
+  }
+
+  /* Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 6px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 5px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--secondary);
+    border-radius: 1ex;
+    height: 4px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--primary);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: var(--tertiary);
+  }
+`;
+
+export default GlobalStyles;

package/src/themes/default/modes/dark/config.js

@@ -0,0 +1,49 @@
+import { generateThemeColors } from "../../utils";
+import chroma from "chroma-js";
+
+// Theme configuration
+const colorsConfig = {
+  lightBase: "dark", // Can be "dark" or "light"
+  mode: "oklab", // TBD add more modes as examples from chroma-js
+  //brandColor: chroma.hsl(35, 0.88, 0.63).hex(), // dominant UI color
+  brandColor: "#FF9900",
+  accentColor: chroma.hsl(290, 0.54, 0.16).hex(), // secondary UI color
+  //systemColor: chroma.hsl(290, 0.1, 0.2).hex(), // base UI color
+  systemColor: "#252F3E",
+  baseSaturation: 0.04, // 0 - 1, controls overall system color saturation
+  lightPaletteLightness: 0.94, // 0 - 1, controls light point lightness
+  darkPaletteLightness: 0.08, // 0 - 1, controls dark point lightness
+  palettePadding: [0.25, 0.1], // padding for edge colors in the palette
+  paletteSize: 12, // Number of steps in the palette
+  mixRatio: 0.2, // 0 - 1, controls how much of the brand color is mixed into the system colors
+  transparentSteps: [
+    0.0625, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95,
+  ],
+};
+
+// Generate theme colors based on the theme configuration
+const generatedColors = generateThemeColors(colorsConfig);
+
+const aliases = {
+  primary: generatedColors.palette.neutrals[11],
+  secondary: generatedColors.palette.neutrals[10],
+  tertiary: generatedColors.palette.neutrals[8],
+
+  base: generatedColors.palette.neutrals[1],
+  surface: generatedColors.palette.darks[2],
+  panel: generatedColors.palette.darks[3],
+  card: generatedColors.palette.darks[2],
+  overlay: generatedColors.palette.neutrals[0],
+
+  success: generatedColors.palette.greens[5],
+  error: generatedColors.palette.reds[5],
+  warning: generatedColors.palette.oranges[5],
+  info: generatedColors.palette.blues[5],
+};
+
+const colors = {
+  ...generatedColors,
+  ...aliases,
+};
+
+export default colors;