@kkkarsss/ui 1.0.0

package/dist/.storybook/main.d.ts

@@ -0,0 +1,3 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+declare const config: StorybookConfig;
+export default config;

package/dist/.storybook/main.js

@@ -0,0 +1,34 @@
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@chromatic-com/storybook',
+        '@storybook/addon-vitest',
+        '@storybook/addon-a11y',
+        '@storybook/addon-docs',
+        '@storybook/addon-onboarding',
+    ],
+    framework: '@storybook/react-vite',
+    async viteFinal(config) {
+        if (config.resolve) {
+            const alias = config.resolve.alias || {};
+            if (Array.isArray(alias)) {
+                alias.push({
+                    find: '@kars',
+                    replacement: path.resolve(__dirname, '../../kars-modules/src'),
+                });
+            }
+            else {
+                config.resolve.alias = {
+                    ...alias,
+                    '@kars': path.resolve(__dirname, '../../kars-modules/src'),
+                };
+            }
+        }
+        return config;
+    },
+};
+export default config;

package/dist/.storybook/preview.d.ts

@@ -0,0 +1,4 @@
+import type { Preview } from '@storybook/react-vite';
+import '../src/index.css';
+declare const preview: Preview;
+export default preview;

package/dist/.storybook/preview.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ThemeProvider, WidgetProvider } from '../src';
+import '../src/index.css';
+const preview = {
+    decorators: [
+        (Story) => {
+            return React.createElement(ThemeProvider, null, React.createElement(WidgetProvider, null, Story()));
+        },
+    ],
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+export default preview;

package/dist/index.css

@@ -0,0 +1,238 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    /* Text Sizes */
+    .text-xxs { font-size: 8px; line-height: 8px; }
+    .text-xs { font-size: var(--text-xs); line-height: var(--text-xs); }
+    .text-s { font-size: var(--text-s); line-height: var(--text-s); }
+    .text-m { font-size: var(--text-m); line-height: var(--text-m); }
+    .text-l { font-size: var(--text-l); line-height: var(--text-l); }
+    .text-xl { font-size: var(--text-xl); line-height: var(--text-xl); }
+
+    /* Padding Sizes (Unified) */
+    .p-none { padding: 0; }
+    .p-xs { padding: 2px; }
+    .p-s { padding: 4px; }
+    .p-m { padding: 8px; }
+    .p-l { padding: 16px; }
+    .p-xl { padding: 32px; }
+
+    /* Padding Top */
+    .pt-none { padding-top: 0; }
+    .pt-xs { padding-top: 2px; }
+    .pt-s { padding-top: 4px; }
+    .pt-m { padding-top: 8px; }
+    .pt-l { padding-top: 16px; }
+    .pt-xl { padding-top: 32px; }
+
+    /* Padding Bottom */
+    .pb-none { padding-bottom: 0; }
+    .pb-xs { padding-bottom: 2px; }
+    .pb-s { padding-bottom: 4px; }
+    .pb-m { padding-bottom: 8px; }
+    .pb-l { padding-bottom: 16px; }
+    .pb-xl { padding-bottom: 32px; }
+
+    /* Padding Left */
+    .pl-none { padding-left: 0; }
+    .pl-xs { padding-left: 2px; }
+    .pl-s { padding-left: 4px; }
+    .pl-m { padding-left: 8px; }
+    .pl-l { padding-left: 16px; }
+    .pl-xl { padding-left: 32px; }
+
+    /* Padding Right */
+    .pr-none { padding-right: 0; }
+    .pr-xs { padding-right: 2px; }
+    .pr-s { padding-right: 4px; }
+    .pr-m { padding-right: 8px; }
+    .pr-l { padding-right: 16px; }
+    .pr-xl { padding-right: 32px; }
+
+    /* Padding X */
+    .px-none { padding-left: 0; padding-right: 0; }
+    .px-xs { padding-left: 2px; padding-right: 2px; }
+    .px-s { padding-left: 4px; padding-right: 4px; }
+    .px-m { padding-left: 8px; padding-right: 8px; }
+    .px-l { padding-left: 16px; padding-right: 16px; }
+    .px-xl { padding-left: 32px; padding-right: 32px; }
+
+    /* Padding Y */
+    .py-none { padding-top: 0; padding-bottom: 0; }
+    .py-xs { padding-top: 2px; padding-bottom: 2px; }
+    .py-s { padding-top: 4px; padding-bottom: 4px; }
+    .py-m { padding-top: 8px; padding-bottom: 8px; }
+    .py-l { padding-top: 16px; padding-bottom: 16px; }
+    .py-xl { padding-top: 32px; padding-bottom: 32px; }
+
+    /* Margin Sizes (Unified) */
+    .m-none { margin: 0; }
+    .m-xs { margin: 2px; }
+    .m-s { margin: 4px; }
+    .m-m { margin: 8px; }
+    .m-l { margin: 16px; }
+    .m-xl { margin: 32px; }
+
+    /* margin Top */
+    .mt-none { margin-top: 0; }
+    .mt-xs { margin-top: 2px; }
+    .mt-s { margin-top: 4px; }
+    .mt-m { margin-top: 8px; }
+    .mt-l { margin-top: 16px; }
+    .mt-xl { margin-top: 32px; }
+
+    /* margin Bottom */
+    .mb-none { margin-bottom: 0; }
+    .mb-xs { margin-bottom: 2px; }
+    .mb-s { margin-bottom: 4px; }
+    .mb-m { margin-bottom: 8px; }
+    .mb-l { margin-bottom: 16px; }
+    .mb-xl { margin-bottom: 32px; }
+
+    /* margin Left */
+    .ml-none { margin-left: 0; }
+    .ml-xs { margin-left: 2px; }
+    .ml-s { margin-left: 4px; }
+    .ml-m { margin-left: 8px; }
+    .ml-l { margin-left: 16px; }
+    .ml-xl { margin-left: 32px; }
+
+    /* margin Right */
+    .mr-none { margin-right: 0; }
+    .mr-xs { margin-right: 2px; }
+    .mr-s { margin-right: 4px; }
+    .mr-m { margin-right: 8px; }
+    .mr-l { margin-right: 16px; }
+    .mr-xl { margin-right: 32px; }
+
+    /* margin X */
+    .mx-none { margin-left: 0; margin-right: 0; }
+    .mx-xs { margin-left: 2px; margin-right: 2px; }
+    .mx-s { margin-left: 4px; margin-right: 4px; }
+    .mx-m { margin-left: 8px; margin-right: 8px; }
+    .mx-l { margin-left: 16px; margin-right: 16px; }
+    .mx-xl { margin-left: 32px; margin-right: 32px; }
+
+    /* margin Y */
+    .my-none { margin-top: 0; margin-bottom: 0; }
+    .my-xs { margin-top: 2px; margin-bottom: 2px; }
+    .my-s { margin-top: 4px; margin-bottom: 4px; }
+    .my-m { margin-top: 8px; margin-bottom: 8px; }
+    .my-l { margin-top: 16px; margin-bottom: 16px; }
+    .my-xl { margin-top: 32px; margin-bottom: 32px; }
+
+    /* Gap Sizes */
+    .gap-none { gap: 0; }
+    .gap-xs { gap: 2px; }
+    .gap-s { gap: 4px; }
+    .gap-m { gap: 8px; }
+    .gap-l { gap: 16px; }
+    .gap-xl { gap: 32px; }
+}
+
+:root {
+    font-family: Roboto, sans-serif;
+
+    /* Text Sizes */
+    --text-xl: 18px;
+    --text-l: 16px;
+    --text-m: 14px;
+    --text-s: 12px;
+    --text-xs: 10px;
+
+    /* Dark theme (default) */
+    --background: #232323;
+    --background-accent: #272727;
+    --foreground: #d9d9d9;
+
+    --secondary: #3b3b3b;
+    --secondary-foreground: #999;
+
+    --accent: #ed3a64;
+    --accent-foreground: #ffffff;
+    --shadow: rgba(0, 0, 0, 0.1);
+
+    --success: #22c55e;
+    --warning: #f59e0b;
+    --error: #ef4444;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+}
+
+.dark {
+    color-scheme: dark;
+    --background: #232323;
+    --background-accent: #272727;
+    --foreground: #d9d9d9;
+
+    --secondary: #3b3b3b;
+    --secondary-foreground: #999;
+
+    --accent: #ed3a64;
+    --accent-foreground: #ffffff;
+    --shadow: rgba(0, 0, 0, 0.1);
+}
+
+.light {
+    color-scheme: light;
+    --background: #f4f4f4;
+    --background-accent: #fafafa;
+    --foreground: #080809;
+
+    --secondary: #e5e7eb;
+    --secondary-foreground: #919191;
+    --shadow: rgba(0, 0, 0, 0.03);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Roboto, sans-serif;
+}
+
+.cursor {
+    cursor: pointer;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    background-color: var(--background);
+    color: var(--foreground);
+}
+
+.scrollbar-custom {
+    scrollbar-width: thin;
+    scrollbar-color: var(--secondary) transparent;
+}
+.scrollbar-custom::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+.scrollbar-custom::-webkit-scrollbar-track {
+    background: transparent;
+}
+.scrollbar-custom::-webkit-scrollbar-thumb {
+    background-color: var(--secondary);
+    border-radius: 10px;
+}
+
+.scrollbar-none {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+    display: none;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import './index.css';
+export * from './ui';
+export * from './providers';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,4 @@
+import './index.css';
+export * from './ui';
+export * from './providers';
+export * from './utils';

package/dist/providers/alert/alert-context.d.ts

@@ -0,0 +1,16 @@
+export type TAlert = {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: Date;
+    isRead: boolean;
+};
+export type TAlertContext = {
+    currentAlert: TAlert | null;
+    history: TAlert[];
+    addAlert: (alert: Omit<TAlert, 'id' | 'timestamp' | 'isRead'>) => void;
+    clearHistory: () => void;
+    dismissCurrentAlert: (isRead?: boolean) => void;
+    markAllAsRead: () => void;
+};
+export declare const AlertContext: import("react").Context<TAlertContext | undefined>;

package/dist/providers/alert/alert-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const AlertContext = createContext(undefined);

package/dist/providers/alert/alert-provider.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type TAlertProviderProps = {
+    children: ReactNode;
+};
+export declare function AlertProvider({ children }: TAlertProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/alert/alert-provider.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useRef } from 'react';
+import { AlertContext } from './alert-context';
+export function AlertProvider({ children }) {
+    const [currentAlert, setCurrentAlert] = useState(null);
+    const [history, setHistory] = useState([]);
+    const timerRef = useRef(null);
+    const dismissCurrentAlert = useCallback((isRead = false) => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        if (isRead && currentAlert) {
+            setHistory((prev) => prev.map((a) => (a.id === currentAlert.id ? { ...a, isRead: true } : a)));
+        }
+        setCurrentAlert(null);
+    }, [currentAlert]);
+    const addAlert = useCallback((alertData) => {
+        const newAlert = {
+            ...alertData,
+            id: Math.random().toString(36).substring(2, 9),
+            timestamp: new Date(),
+            isRead: false,
+        };
+        setHistory((prev) => [newAlert, ...prev]);
+        setCurrentAlert(newAlert);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+            setCurrentAlert(null);
+            timerRef.current = null;
+        }, 5000);
+    }, []);
+    const clearHistory = useCallback(() => {
+        setHistory([]);
+    }, []);
+    const markAllAsRead = useCallback(() => {
+        setHistory((prev) => prev.map((a) => ({ ...a, isRead: true })));
+    }, []);
+    const value = {
+        currentAlert,
+        history,
+        addAlert,
+        clearHistory,
+        dismissCurrentAlert,
+        markAllAsRead,
+    };
+    return _jsx(AlertContext.Provider, { value: value, children: children });
+}

package/dist/providers/alert/use-alerts.d.ts

@@ -0,0 +1 @@
+export declare const useAlerts: () => import("./alert-context").TAlertContext;

package/dist/providers/alert/use-alerts.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { AlertContext } from './alert-context';
+export const useAlerts = () => {
+    const context = useContext(AlertContext);
+    if (context === undefined) {
+        throw new Error('useAlerts must be used within an AlertProvider');
+    }
+    return context;
+};

package/dist/providers/index.d.ts

@@ -0,0 +1,9 @@
+export { WidgetsProviderContext } from './widget/widget-context';
+export { WidgetProvider } from './widget/widget-provider';
+export { useWidget } from './widget/use-widgets';
+export { type TTheme, ThemeProviderContext } from './theme/theme-context';
+export { useTheme } from './theme/use-theme';
+export { ThemeProvider } from './theme/theme-provider';
+export { AlertContext, type TAlert } from './alert/alert-context';
+export { AlertProvider } from './alert/alert-provider';
+export { useAlerts } from './alert/use-alerts';

package/dist/providers/index.js

@@ -0,0 +1,9 @@
+export { WidgetsProviderContext } from './widget/widget-context';
+export { WidgetProvider } from './widget/widget-provider';
+export { useWidget } from './widget/use-widgets';
+export { ThemeProviderContext } from './theme/theme-context';
+export { useTheme } from './theme/use-theme';
+export { ThemeProvider } from './theme/theme-provider';
+export { AlertContext } from './alert/alert-context';
+export { AlertProvider } from './alert/alert-provider';
+export { useAlerts } from './alert/use-alerts';

package/dist/providers/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-theme';
+export * from './theme-context';
+export * from './theme-provider';

package/dist/providers/theme/index.js

@@ -0,0 +1,3 @@
+export * from './use-theme';
+export * from './theme-context';
+export * from './theme-provider';

package/dist/providers/theme/theme-context.d.ts

@@ -0,0 +1,7 @@
+export type TTheme = 'dark' | 'light' | 'system';
+type ThemeProviderState = {
+    theme: TTheme;
+    setTheme: (theme: TTheme) => void;
+};
+export declare const ThemeProviderContext: import("react").Context<ThemeProviderState>;
+export {};

package/dist/providers/theme/theme-context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const initialState = {
+    theme: 'system',
+    setTheme: () => null,
+};
+export const ThemeProviderContext = createContext(initialState);

package/dist/providers/theme/theme-provider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type TTheme } from './theme-context';
+type TThemeProviderProps = {
+    children: ReactNode;
+    defaultTheme?: TTheme;
+    storageKey?: string;
+};
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: TThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/theme/theme-provider.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ThemeProviderContext } from './theme-context';
+export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'theme', ...props }) {
+    const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        if (theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+                .matches
+                ? 'dark'
+                : 'light';
+            root.classList.add(systemTheme);
+            return;
+        }
+        root.classList.add(theme);
+    }, [theme]);
+    const value = {
+        theme,
+        setTheme: (theme) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+    return (_jsx(ThemeProviderContext.Provider, { ...props, value: value, children: children }));
+}

package/dist/providers/theme/use-theme.d.ts

@@ -0,0 +1,4 @@
+export declare const useTheme: () => {
+    theme: import("./theme-context").TTheme;
+    setTheme: (theme: import("./theme-context").TTheme) => void;
+};

package/dist/providers/theme/use-theme.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ThemeProviderContext } from './theme-context';
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+    if (context === undefined)
+        throw new Error('useTheme must be used within a ThemeProvider');
+    return context;
+};

package/dist/providers/widget/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./widget-context";
+export * from "./widget-provider";
+export * from "./use-widgets";

package/dist/providers/widget/index.js

@@ -0,0 +1,3 @@
+export * from "./widget-context";
+export * from "./widget-provider";
+export * from "./use-widgets";

package/dist/providers/widget/use-widgets.d.ts

@@ -0,0 +1,4 @@
+export declare const useWidget: () => {
+    widget: import("./widget-context").TWidget | null;
+    setWidget: (widgets: import("./widget-context").TWidget | null) => void;
+};

package/dist/providers/widget/use-widgets.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { WidgetsProviderContext } from './widget-context';
+export const useWidget = () => {
+    const context = useContext(WidgetsProviderContext);
+    if (context === undefined)
+        throw new Error('useWidget must be used within a WidgetsProvider');
+    return context;
+};

package/dist/providers/widget/widget-context.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement } from 'react';
+import type { TBlockProps } from '../../ui';
+export type TWidget = {
+    ui: ReactElement<TBlockProps>;
+    id: string;
+};
+type TWidgetProviderState = {
+    widget: TWidget | null;
+    setWidget: (widgets: TWidget | null) => void;
+};
+export declare const WidgetsProviderContext: import("react").Context<TWidgetProviderState>;
+export {};

package/dist/providers/widget/widget-context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const initialState = {
+    widget: null,
+    setWidget: () => null,
+};
+export const WidgetsProviderContext = createContext(initialState);

package/dist/providers/widget/widget-provider.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type TWidgetProviderProps = {
+    children: ReactNode;
+};
+export declare function WidgetProvider({ children }: TWidgetProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/providers/widget/widget-provider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { WidgetsProviderContext } from './widget-context';
+export function WidgetProvider({ children }) {
+    const [widget, setWidget] = useState(null);
+    const value = useMemo(() => ({
+        widget,
+        setWidget: (newWidget) => {
+            setWidget(newWidget);
+        },
+    }), [widget]);
+    return _jsx(WidgetsProviderContext.Provider, { value: value, children: children });
+}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+import './index.css';
+export * from './ui/index.js';
+export * from './providers/index.js';
+export * from './utils/index.js';

package/dist/src/index.js

@@ -0,0 +1,4 @@
+import './index.css';
+export * from './ui/index.js';
+export * from './providers/index.js';
+export * from './utils/index.js';

package/dist/src/providers/alert/alert-context.d.ts

@@ -0,0 +1,16 @@
+export type TAlert = {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: Date;
+    isRead: boolean;
+};
+export type TAlertContext = {
+    currentAlert: TAlert | null;
+    history: TAlert[];
+    addAlert: (alert: Omit<TAlert, 'id' | 'timestamp' | 'isRead'>) => void;
+    clearHistory: () => void;
+    dismissCurrentAlert: (isRead?: boolean) => void;
+    markAllAsRead: () => void;
+};
+export declare const AlertContext: import("react").Context<TAlertContext | undefined>;

package/dist/src/providers/alert/alert-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const AlertContext = createContext(undefined);

package/dist/src/providers/alert/alert-provider.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type TAlertProviderProps = {
+    children: ReactNode;
+};
+export declare function AlertProvider({ children }: TAlertProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};