@vaneui/ui 0.1.2 → 0.1.3

package/README.md

@@ -116,6 +116,18 @@ npm run build
 
 # Watch mode for development
 npm run watch
+
+# Verify package contents
+npm run verify-package
+```
+
+### Publishing the Package
+
+Before publishing, the package automatically runs the build process and verifies that all required files are present. This ensures that the published package contains all necessary files for users.
+
+```bash
+# Publish the package
+npm publish
 ```
 
 ### Component Development Guidelines
@@ -144,4 +156,4 @@ When contributing to this project:
 
 ## License
 
-This project is licensed under the ISC License.
+This project is licensed under the ISC License.

package/dist/components/complex/index.d.ts

@@ -0,0 +1 @@
+export { SocialShare } from "./sharer";

package/dist/components/complex/index.js

@@ -0,0 +1,132 @@
+import { jsx } from 'react/jsx-runtime';
+
+const buildQueryString = (params) => {
+    const validKeys = Object.keys(params).filter(key => params[key] !== undefined && params[key] !== '');
+    return validKeys.length > 0
+        ? '?' +
+            validKeys
+                .map(key => `${key}=${encodeURIComponent(String(params[key]))}`)
+                .join('&')
+        : '';
+};
+const SocialShare = ({ url = window.location.href, text = '', width = 600, height = 480, isLink = false, isBlank = true, platforms, containerComponent, buttonComponent, buttonComponents, facebookProps = {}, twitterProps = {}, emailProps = {}, whatsappProps = {}, }) => {
+    const shareConfigs = {
+        fb: {
+            shareUrl: 'https://www.facebook.com/sharer/sharer.php',
+            getParams: () => ({
+                u: url,
+                hashtag: facebookProps.hashtag
+                    ? facebookProps.hashtag.startsWith('#')
+                        ? facebookProps.hashtag
+                        : `#${facebookProps.hashtag}`
+                    : '',
+                quote: text,
+            }),
+        },
+        li: {
+            shareUrl: 'https://www.linkedin.com/shareArticle',
+            getParams: () => ({
+                url,
+            }),
+        },
+        x: {
+            shareUrl: 'https://x.com/intent/tweet',
+            getParams: () => ({
+                text,
+                url,
+                hashtags: twitterProps.hashtags,
+                via: twitterProps.via,
+                related: twitterProps.related,
+                in_reply_to: twitterProps.inReplyTo,
+            }),
+        },
+        th: {
+            shareUrl: 'https://threads.net/intent/post',
+            getParams: () => ({
+                text: `${text} ${url}`,
+            }),
+        },
+        em: {
+            shareUrl: 'mailto:' + (emailProps.to || ''),
+            getParams: () => ({
+                subject: emailProps.title,
+                body: `${text}\n${url}`,
+            }),
+        },
+        wa: {
+            shareUrl: whatsappProps.web
+                ? 'https://web.whatsapp.com/send'
+                : 'https://wa.me/',
+            getParams: () => ({
+                phone: whatsappProps.to,
+                text: `${text} ${url}`,
+            }),
+        },
+        tg: {
+            shareUrl: 'https://t.me/share',
+            getParams: () => ({
+                text,
+                url,
+            }),
+        },
+        re: {
+            shareUrl: 'https://www.reddit.com/submit',
+            getParams: () => ({
+                url,
+                title: text,
+            }),
+        },
+    };
+    const platformLabels = {
+        fb: 'Facebook',
+        li: 'LinkedIn',
+        x: 'X',
+        th: 'Threads',
+        em: 'Email',
+        wa: 'WhatsApp',
+        tg: 'Telegram',
+        re: 'Reddit',
+    };
+    const buildShareUrl = (config) => {
+        const params = config.getParams();
+        const queryString = buildQueryString(params);
+        return config.shareUrl + queryString;
+    };
+    const openShareWindow = (shareUrl) => {
+        if (isLink) {
+            if (isBlank) {
+                window.open(shareUrl, '_blank');
+            }
+            else {
+                window.location.href = shareUrl;
+            }
+        }
+        else {
+            const left = window.innerWidth / 2 - width / 2 + window.screenX;
+            const top = window.innerHeight / 2 - height / 2 + window.screenY;
+            const popParams = `scrollbars=no, width=${width}, height=${height}, top=${top}, left=${left}`;
+            const newWindow = window.open(shareUrl, '', popParams);
+            if (newWindow) {
+                newWindow.focus();
+            }
+        }
+    };
+    const handleShare = (key) => {
+        const config = shareConfigs[key];
+        if (!config)
+            return;
+        const shareUrl = buildShareUrl(config);
+        openShareWindow(shareUrl);
+    };
+    const ContainerComponent = containerComponent || 'div';
+    const DefaultButton = buttonComponent || 'button';
+    const platformsToShow = platforms || Object.keys(shareConfigs);
+    return (jsx(ContainerComponent, { children: platformsToShow.map(key => {
+            const Button = (buttonComponents && buttonComponents[key]) || DefaultButton;
+            const label = platformLabels[key] || key;
+            return (jsx(Button, { onClick: () => handleShare(key), title: `Share on ${label}`, children: label }, key));
+        }) }));
+};
+
+export { SocialShare };
+//# sourceMappingURL=index.js.map

package/dist/components/complex/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/complex/sharer.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+type Platform = 'fb' | 'li' | 'x' | 'th' | 'em' | 'wa' | 'tg' | 're';
+interface SocialShareCommonProps {
+    url?: string;
+    text?: string;
+    width?: number;
+    height?: number;
+    isLink?: boolean;
+    isBlank?: boolean;
+    platforms?: Platform[];
+    containerComponent?: React.ElementType;
+    buttonComponent?: React.ElementType;
+    buttonComponents?: Partial<Record<Platform, React.ElementType>>;
+}
+interface FacebookShareProps {
+    hashtag?: string;
+}
+interface TwitterShareProps {
+    hashtags?: string;
+    via?: string;
+    related?: string;
+    inReplyTo?: string;
+}
+interface EmailShareProps {
+    title?: string;
+    to?: string;
+}
+interface WhatsAppShareProps {
+    to?: string;
+    web?: boolean;
+}
+interface SocialShareProps extends SocialShareCommonProps {
+    facebookProps?: FacebookShareProps;
+    twitterProps?: TwitterShareProps;
+    emailProps?: EmailShareProps;
+    whatsappProps?: WhatsAppShareProps;
+}
+export declare const SocialShare: React.FC<SocialShareProps>;
+export {};

package/dist/components/themeContext.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ComponentTheme } from "./ui/theme/common/ComponentTheme";
+import { ButtonTheme } from './ui/theme/buttonTheme';
+import { BadgeTheme } from './ui/theme/badgeTheme';
+import { ChipTheme } from './ui/theme/chipTheme';
+import { TypographyComponentTheme } from './ui/theme/typographyComponentTheme';
+import { CardTheme } from "./ui/theme/cardTheme";
+import { RowTheme } from "./ui/theme/rowTheme";
+import { DividerTheme } from './ui/theme/dividerTheme';
+import { ContainerTheme } from './ui/theme/containerTheme';
+import { ColTheme } from './ui/theme/colTheme';
+import { StackTheme } from './ui/theme/stackTheme';
+import { SectionTheme } from "./ui/theme/sectionTheme";
+import { GridTheme } from "./ui/theme/gridTheme";
+import { BadgeProps, ButtonProps, CardProps, ChipProps, ColProps, ContainerProps, DividerProps, GridProps, RowProps, SectionProps, StackProps, TypographyComponentProps } from "./ui/props/props";
+import { DeepPartial } from "./utils/deepPartial";
+export declare const COMPONENT_KEYS: readonly ["button", "badge", "chip", "card", "divider", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem"];
+export type ComponentKey = typeof COMPONENT_KEYS[number];
+export interface ThemeProps extends Record<ComponentKey, ComponentTheme<object, object>> {
+    button: ComponentTheme<ButtonProps, ButtonTheme<ButtonProps>>;
+    badge: ComponentTheme<BadgeProps, BadgeTheme<BadgeProps>>;
+    chip: ComponentTheme<ChipProps, ChipTheme<ChipProps>>;
+    card: ComponentTheme<CardProps, CardTheme<CardProps>>;
+    divider: ComponentTheme<DividerProps, DividerTheme<DividerProps>>;
+    container: ComponentTheme<ContainerProps, ContainerTheme<ContainerProps>>;
+    row: ComponentTheme<RowProps, RowTheme<RowProps>>;
+    col: ComponentTheme<ColProps, ColTheme<ColProps>>;
+    stack: ComponentTheme<StackProps, StackTheme<StackProps>>;
+    section: ComponentTheme<SectionProps, SectionTheme<SectionProps>>;
+    grid3: ComponentTheme<GridProps, GridTheme<GridProps>>;
+    grid4: ComponentTheme<GridProps, GridTheme<GridProps>>;
+    pageTitle: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    sectionTitle: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    title: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    text: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    link: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    list: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    listItem: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+}
+export type PartialTheme = DeepPartial<ThemeProps>;
+export declare const defaultTheme: ThemeProps;
+export type ThemeDefaults = Partial<Record<ComponentKey, Record<string, boolean>>>;
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: PartialTheme;
+    themeDefaults?: ThemeDefaults;
+    themeOverride?: (theme: ThemeProps) => ThemeProps;
+}
+export declare function ThemeProvider({ children, theme: themeObject, themeDefaults, themeOverride }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeProps;

package/dist/components/themedComponent.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTheme } from "./ui/theme/common/ComponentTheme";
+import { ComponentProps } from "./ui/props/props";
+export type ThemedComponentProps<P extends ComponentProps, T extends object> = P & {
+    theme: ComponentTheme<P, T>;
+    propsToOmit?: readonly string[];
+};
+export declare function ThemedComponent<P extends ComponentProps, T extends object>({ theme, propsToOmit, ...props }: ThemedComponentProps<P, T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { BadgeProps } from './props/props';
+export declare const Badge: (props: BadgeProps) => JSX.Element;

package/dist/components/ui/button.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { ButtonProps } from './props/props';
+export declare const Button: (props: ButtonProps) => JSX.Element;

package/dist/components/ui/card.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { CardProps } from "./props/props";
+export declare const Card: (props: CardProps) => JSX.Element;

package/dist/components/ui/chip.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { TypographyComponentProps } from './props/props';
+export declare const Chip: (props: TypographyComponentProps) => JSX.Element;

package/dist/components/ui/classes/appearanceClasses.d.ts

@@ -0,0 +1,13 @@
+import { AppearanceKey, TextAppearanceKey } from "../props/keys";
+export declare const filledBackgroundAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const filledHoverBackgroundAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const filledActiveBackgroundAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const backgroundAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const hoverBackgroundAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const activeBackgroundAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const layoutBackgroundAppearanceClasses: Record<AppearanceKey, string>;
+export declare const bgBorderAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const borderAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const filledBorderAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const ringAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const filledRingAppearanceClasses: Record<TextAppearanceKey, string>;

package/dist/components/ui/classes/spacingClasses.d.ts

@@ -0,0 +1,2 @@
+import { SizeKey } from "../props/keys";
+export declare const commonGaps: Record<SizeKey, string>;

package/dist/components/ui/classes/typographyClasses.d.ts

@@ -0,0 +1,4 @@
+import { SizeKey, TextAppearanceKey } from "../props/keys";
+export declare const filledTextAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const textAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const textSizeClasses: Record<SizeKey, string>;

package/dist/components/ui/col.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { ColProps } from './props/props';
+export declare const Col: (props: ColProps) => JSX.Element;

package/dist/components/ui/container.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { ContainerProps } from './props/props';
+export declare const Container: (props: ContainerProps) => JSX.Element;

package/dist/components/ui/divider.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { DividerProps } from './props/props';
+export declare const Divider: (props: DividerProps) => JSX.Element;

package/dist/components/ui/grid.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'react';
+import { GridProps } from './props/props';
+export declare const Grid3: (props: GridProps) => JSX.Element;
+export declare const Grid4: (props: GridProps) => JSX.Element;

package/dist/components/ui/layout.d.ts

@@ -0,0 +1,7 @@
+export { Section } from './section';
+export { Container } from './container';
+export { Col } from './col';
+export { Row } from './row';
+export { Grid3, Grid4 } from './grid';
+export { Card } from './card';
+export { Stack } from './stack';

package/dist/components/ui/props/index.d.ts

@@ -0,0 +1 @@
+export * from './keys';

package/dist/components/ui/props/keys.d.ts

@@ -0,0 +1,81 @@
+export declare const MODE_KEYS: readonly ["base", "hover", "active"];
+export declare const SIZE_KEYS: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare const VARIANT_KEYS: readonly ["filled", "outline"];
+export declare const APPEARANCE_KEYS: readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const TEXT_APPEARANCE_KEYS: readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link"];
+export declare const FONT_FAMILY_KEYS: readonly ["sans", "serif", "mono"];
+export declare const FONT_WEIGHT_KEYS: readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"];
+export declare const FONT_STYLE_KEYS: readonly ["italic", "notItalic"];
+export declare const TEXT_DECORATION_KEYS: readonly ["underline", "lineThrough", "noUnderline", "overline"];
+export declare const TEXT_TRANSFORM_KEYS: readonly ["uppercase", "lowercase", "capitalize", "normalCase"];
+export declare const TEXT_ALIGN_KEYS: readonly ["textLeft", "textCenter", "textRight", "textJustify"];
+export declare const BORDER_KEYS: readonly ["border", "noBorder"];
+export declare const SHADOW_KEYS: readonly ["shadow", "noShadow"];
+export declare const RING_KEYS: readonly ["ring", "noRing"];
+export declare const PADDING_KEYS: readonly ["padding", "noPadding"];
+export declare const BREAKPOINT_KEYS: readonly ["xsCol", "smCol", "mdCol", "lgCol", "xlCol"];
+export declare const HIDE_KEYS: readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"];
+export declare const POSITION_KEYS: readonly ["relative", "absolute", "fixed", "sticky", "static"];
+export declare const DIRECTION_REVERSE_KEYS: readonly ["reverse"];
+export declare const GAP_KEYS: readonly ["gap", "noGap"];
+export declare const PILL_KEYS: readonly ["pill"];
+export declare const SHARP_KEYS: readonly ["sharp"];
+export declare const ROUNDED_KEYS: readonly ["rounded"];
+export declare const SHAPE_KEYS: readonly ["pill", "sharp", "rounded"];
+export declare const FLEX_DIRECTION_KEYS: readonly ["row", "column", "rowReverse", "columnReverse"];
+export declare const ITEMS_KEYS: readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"];
+export declare const JUSTIFY_KEYS: readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"];
+export declare const WRAP_KEYS: readonly ["flexWrap", "flexNoWrap", "flexWrapReverse"];
+export declare const DISPLAY_KEYS: readonly ["inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"];
+export declare const EXCLUSIVE_KEY_GROUPS: (readonly ["base", "hover", "active"] | readonly ["xs", "sm", "md", "lg", "xl"] | readonly ["filled", "outline"] | readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link"] | readonly ["sans", "serif", "mono"] | readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"] | readonly ["italic", "notItalic"] | readonly ["underline", "lineThrough", "noUnderline", "overline"] | readonly ["uppercase", "lowercase", "capitalize", "normalCase"] | readonly ["textLeft", "textCenter", "textRight", "textJustify"] | readonly ["border", "noBorder"] | readonly ["shadow", "noShadow"] | readonly ["ring", "noRing"] | readonly ["padding", "noPadding"] | readonly ["xsCol", "smCol", "mdCol", "lgCol", "xlCol"] | readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"] | readonly ["relative", "absolute", "fixed", "sticky", "static"] | readonly ["reverse"] | readonly ["gap", "noGap"] | readonly ["pill", "sharp", "rounded"] | readonly ["row", "column", "rowReverse", "columnReverse"] | readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"] | readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"] | readonly ["flexWrap", "flexNoWrap", "flexWrapReverse"] | readonly ["inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"])[];
+export type ModeKey = typeof MODE_KEYS[number];
+export type SizeKey = typeof SIZE_KEYS[number];
+export type RingKey = typeof RING_KEYS[number];
+export type ShapeKey = typeof SHAPE_KEYS[number];
+export type BorderKey = typeof BORDER_KEYS[number];
+export type ShadowKey = typeof SHADOW_KEYS[number];
+export type PaddingKey = typeof PADDING_KEYS[number];
+export type GapKey = typeof GAP_KEYS[number];
+export type VariantKey = typeof VARIANT_KEYS[number];
+export type AppearanceKey = typeof APPEARANCE_KEYS[number];
+export type TextAppearanceKey = typeof TEXT_APPEARANCE_KEYS[number];
+export type FontFamilyKey = typeof FONT_FAMILY_KEYS[number];
+export type FontWeightKey = typeof FONT_WEIGHT_KEYS[number];
+export type FontStyleKey = typeof FONT_STYLE_KEYS[number];
+export type TextDecorationKey = typeof TEXT_DECORATION_KEYS[number];
+export type TextTransformKey = typeof TEXT_TRANSFORM_KEYS[number];
+export type TextAlignKey = typeof TEXT_ALIGN_KEYS[number];
+export type BreakpointKey = typeof BREAKPOINT_KEYS[number];
+export type HideKey = typeof HIDE_KEYS[number];
+export type PositionKey = typeof POSITION_KEYS[number];
+export type FlexDirectionKey = typeof FLEX_DIRECTION_KEYS[number];
+export type ItemsKey = typeof ITEMS_KEYS[number];
+export type JustifyKey = typeof JUSTIFY_KEYS[number];
+export type WrapKey = typeof WRAP_KEYS[number];
+export type DisplayKey = typeof DISPLAY_KEYS[number];
+export declare const BASE_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"];
+export declare const FONT_KEYS: readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
+export declare const TYPOGRAPHY_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
+export type TypographyComponentKey = typeof TYPOGRAPHY_COMPONENT_KEYS[number];
+export declare const BUTTON_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "filled", "outline", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export type ButtonKey = typeof BUTTON_KEYS[number];
+export declare const GRID_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "gap", "noGap", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export type GridKey = typeof GRID_KEYS[number];
+export declare const ROW_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export type RowKey = typeof ROW_KEYS[number];
+export declare const COL_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export type ColKey = typeof COL_KEYS[number];
+export declare const CARD_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "gap", "noGap", "sharp", "rounded", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "ring", "noRing", "shadow", "noShadow", "padding", "noPadding", "row", "column", "rowReverse", "columnReverse", "reverse", "flexWrap", "flexNoWrap", "flexWrapReverse"];
+export type CardKey = typeof CARD_KEYS[number];
+export declare const STACK_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "row", "column", "rowReverse", "columnReverse", "padding", "noPadding"];
+export type StackKey = typeof STACK_KEYS[number];
+export declare const BADGE_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "filled", "outline", "shadow", "noShadow", "border", "noBorder", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export type BadgeKey = typeof BADGE_KEYS[number];
+export declare const CHIP_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "filled", "outline", "shadow", "noShadow", "border", "noBorder", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export type ChipKey = typeof CHIP_KEYS[number];
+export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export type DividerKey = typeof DIVIDER_KEYS[number];
+export declare const CONTAINER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap", "pill", "sharp", "rounded"];
+export type ContainerKey = typeof CONTAINER_KEYS[number];
+export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "row", "column", "rowReverse", "columnReverse", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "pill", "sharp", "rounded"];
+export type SectionKey = typeof SECTION_KEYS[number];

package/dist/components/ui/props/props.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { BadgeKey, ButtonKey, GridKey, RowKey, ColKey, CardKey, StackKey, ChipKey, DividerKey, ContainerKey, SectionKey, TypographyComponentKey } from "./keys";
+export type ComponentProps = {
+    tag?: React.ReactNode | string | any;
+    className?: string;
+    children?: React.ReactNode;
+} & React.HTMLProps<HTMLElement>;
+export type TypographyComponentProps = {
+    [K in TypographyComponentKey]?: boolean;
+} & ComponentProps;
+export type ButtonProps = {
+    [K in ButtonKey]?: boolean;
+} & ComponentProps;
+export type BadgeProps = {
+    [K in BadgeKey]?: boolean;
+} & ComponentProps;
+export type ChipProps = {
+    [K in ChipKey]?: boolean;
+} & ComponentProps;
+export type GridProps = {
+    [K in GridKey]?: boolean;
+} & ComponentProps;
+export type RowProps = {
+    [K in RowKey]?: boolean;
+} & ComponentProps;
+export type ColProps = {
+    [K in ColKey]?: boolean;
+} & ComponentProps;
+export type CardProps = {
+    [K in CardKey]?: boolean;
+} & ComponentProps;
+export type StackProps = {
+    [K in StackKey]?: boolean;
+} & ComponentProps;
+export type SectionProps = {
+    [K in SectionKey]?: boolean;
+} & ComponentProps;
+export type DividerProps = {
+    [K in DividerKey]?: boolean;
+} & ComponentProps;
+export type ContainerProps = {
+    [K in ContainerKey]?: boolean;
+} & ComponentProps;

package/dist/components/ui/row.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { RowProps } from './props/props';
+export declare const Row: (props: RowProps) => JSX.Element;

package/dist/components/ui/section.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { SectionProps } from './props/props';
+export declare const Section: (props: SectionProps) => JSX.Element;

package/dist/components/ui/stack.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { StackProps } from './props/props';
+export declare const Stack: (props: StackProps) => JSX.Element;

package/dist/components/ui/theme/appearance/layoutAppearanceTheme.d.ts

@@ -0,0 +1,10 @@
+import { BaseTheme } from "../common/baseTheme";
+import { AppearanceKey, ModeKey } from "../../props/keys";
+export interface LayoutAppearanceTheme extends Record<AppearanceKey, Record<ModeKey, string>> {
+}
+export declare class LayoutAppearanceTheme extends BaseTheme {
+    static readonly defaultFullConfig: Record<AppearanceKey, Record<ModeKey, string>>;
+    constructor(initialOverrides?: Partial<Record<AppearanceKey, Partial<Record<ModeKey, string>>>>);
+    getClasses(props: Record<string, boolean>, defaults: Record<string, boolean>): string[];
+    static createDefaultStyle(src?: Partial<Record<ModeKey, Partial<Record<AppearanceKey, string>>>>): LayoutAppearanceTheme;
+}

package/dist/components/ui/theme/appearance/textAppearanceTheme.d.ts

@@ -0,0 +1,10 @@
+import { BaseTheme } from "../common/baseTheme";
+import { ModeKey, TextAppearanceKey } from "../../props/keys";
+export interface TextAppearanceTheme extends Record<TextAppearanceKey, Record<ModeKey, string>> {
+}
+export declare class TextAppearanceTheme extends BaseTheme {
+    static readonly defaultFullConfig: Record<TextAppearanceKey, Record<ModeKey, string>>;
+    constructor(initialOverrides?: Partial<Record<TextAppearanceKey, Partial<Record<ModeKey, string>>>>);
+    getClasses(props: Record<string, boolean>, defaults: Record<string, boolean>): string[];
+    static createDefaultStyle(src?: Partial<Record<ModeKey, Partial<Record<TextAppearanceKey, string>>>>): TextAppearanceTheme;
+}

package/dist/components/ui/theme/appearance/variantTheme.d.ts

@@ -0,0 +1,15 @@
+import { BaseTheme } from "../common/baseTheme";
+import { VariantKey } from "../../props/keys";
+import { TextAppearanceTheme } from "./textAppearanceTheme";
+export interface VariantTheme extends Record<VariantKey, TextAppearanceTheme> {
+}
+export declare class VariantTheme extends BaseTheme {
+    static readonly defaultInstances: Record<VariantKey, TextAppearanceTheme>;
+    constructor(variantInstances?: Record<VariantKey, TextAppearanceTheme>);
+    getClasses(props: Record<string, boolean>, defaults: Record<string, boolean>): string[];
+    static createDefault(initialInstances?: Partial<Record<VariantKey, TextAppearanceTheme>>): VariantTheme;
+    static createDefaultBackground(): VariantTheme;
+    static createDefaultText(): VariantTheme;
+    static createDefaultBorder(): VariantTheme;
+    static createDefaultRing(): VariantTheme;
+}

package/dist/components/ui/theme/badgeTheme.d.ts

@@ -0,0 +1,32 @@
+import { BaseComponentTheme, ComponentTheme, DefaultLayoutThemes } from "./common/ComponentTheme";
+import { BadgeProps } from "../props/props";
+import { SizeTheme } from "./size/sizeTheme";
+import { GapTheme } from "./size/gapTheme";
+import { RadiusTheme } from "./layout/radiusTheme";
+import { BorderTheme } from "./layout/borderTheme";
+import { ShadowTheme } from "./layout/shadowTheme";
+import { RingTheme } from "./layout/ringTheme";
+import { PxTheme } from "./size/pxTheme";
+import { PyTheme } from "./size/pyTheme";
+import { VariantTheme } from "./appearance/variantTheme";
+export interface BadgeTheme<P> extends BaseComponentTheme<P> {
+    size: {
+        px: PxTheme;
+        py: PyTheme;
+        text: SizeTheme;
+        gap: GapTheme;
+        shadow: ShadowTheme;
+    };
+    appearance: {
+        background: VariantTheme;
+        text: VariantTheme;
+        border: VariantTheme;
+        ring: VariantTheme;
+    };
+    layout: DefaultLayoutThemes<P> & {
+        border: BorderTheme;
+        ring: RingTheme;
+        radius: RadiusTheme;
+    };
+}
+export declare const defaultBadgeTheme: ComponentTheme<BadgeProps, BadgeTheme<BadgeProps>>;