@blenx-dev/components 0.0.0

package/dist/src/components/Stack/stack.css.d.ts

@@ -0,0 +1,82 @@
+export declare const stackRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    gap: {
+        none: {
+            gap: number;
+        };
+        xxsmall: {
+            gap: "4px";
+        };
+        xsmall: {
+            gap: "8px";
+        };
+        small: {
+            gap: "12px";
+        };
+        medium: {
+            gap: "16px";
+        };
+        large: {
+            gap: "24px";
+        };
+        xlarge: {
+            gap: "32px";
+        };
+        xxlarge: {
+            gap: "48px";
+        };
+        xxxlarge: {
+            gap: "64px";
+        };
+        huge: {
+            gap: "80px";
+        };
+        massive: {
+            gap: "96px";
+        };
+    };
+    align: {
+        start: {
+            alignItems: "flex-start";
+        };
+        center: {
+            alignItems: "center";
+        };
+        end: {
+            alignItems: "flex-end";
+        };
+        stretch: {
+            alignItems: "stretch";
+        };
+        baseline: {
+            alignItems: "baseline";
+        };
+    };
+    justify: {
+        start: {
+            justifyContent: "flex-start";
+        };
+        center: {
+            justifyContent: "center";
+        };
+        end: {
+            justifyContent: "flex-end";
+        };
+        between: {
+            justifyContent: "space-between";
+        };
+        around: {
+            justifyContent: "space-around";
+        };
+        evenly: {
+            justifyContent: "space-evenly";
+        };
+        stretch: {
+            justifyContent: "stretch";
+        };
+    };
+    wrap: {
+        true: {
+            flexWrap: "wrap";
+        };
+    };
+}>;

package/dist/src/components/Stack/stack.d.ts

@@ -0,0 +1,11 @@
+import { BoxProps } from '../Box/box';
+import { stackRecipe } from './stack.css';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+type StackVariants = RecipeVariants<typeof stackRecipe>;
+export type StackProps = Omit<BoxProps, "display"> & StackVariants;
+export declare function Stack({ gap, align, justify, wrap, className, style, ...props }: StackProps): import("react").JSX.Element;
+type VStackProps = Omit<StackProps, "direction">;
+export declare function VStack(props: VStackProps): import("react").JSX.Element;
+export type HStackProps = Omit<StackProps, "direction">;
+export declare function HStack(props: HStackProps): import("react").JSX.Element;
+export {};

package/dist/src/components/Stack/stack.doc.d.ts

@@ -0,0 +1,3 @@
+export declare function VStackStory(): import("react").JSX.Element;
+export declare function HStackStory(): import("react").JSX.Element;
+export declare function GapVariantsStory(): import("react").JSX.Element;

package/dist/src/components/Surface/index.d.ts

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

package/dist/src/components/Surface/surface.css.d.ts

@@ -0,0 +1,34 @@
+export declare const variantRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {
+            backgroundColor: `var(--${string})`;
+        };
+        outline: {
+            backgroundColor: `var(--${string})`;
+            borderWidth: number;
+            borderStyle: "solid";
+            borderColor: `var(--${string})`;
+        };
+        raised: {
+            backgroundColor: `var(--${string})`;
+            boxShadow: `var(--${string})`;
+        };
+        sunken: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    interactive: {
+        true: {
+            cursor: "pointer";
+            selectors: {
+                "&:hover": {
+                    backgroundColor: `var(--${string})`;
+                };
+                "&:focus-visible": {
+                    outline: `2px solid var(--${string})`;
+                    outlineOffset: "2px";
+                };
+            };
+        };
+    };
+}>;

package/dist/src/components/Surface/surface.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '../Box/box';
+import { variantRecipe } from './surface.css';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+type SurfaceProps = BoxProps & RecipeVariants<typeof variantRecipe>;
+declare function Surface({ variant, interactive, className, style, ...props }: SurfaceProps): import("react").JSX.Element;
+export type { SurfaceProps };
+export { Surface };

package/dist/src/components/Surface/surface.doc.d.ts

@@ -0,0 +1,2 @@
+export declare function VariantsStory(): import("react").JSX.Element;
+export declare function InteractiveStory(): import("react").JSX.Element;

package/dist/src/components/Switch/index.d.ts

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

package/dist/src/components/Switch/switch.css.d.ts

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const rootChecked: string;
+export declare const rootDisabled: string;
+export declare const thumb: string;
+export declare const thumbChecked: string;

package/dist/src/components/Switch/switch.d.ts

@@ -0,0 +1,7 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+type Props = Omit<SwitchPrimitive.Root.Props, "style" | "className"> & {
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare function Switch({ className, style, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/src/components/Switch/switch.demo.d.ts

@@ -0,0 +1,5 @@
+export declare function SwitchDemo(): import("react").JSX.Element;
+export declare const demos: {
+    name: string;
+    component: typeof SwitchDemo;
+}[];

package/dist/src/components/Switch/switch.doc.d.ts

@@ -0,0 +1,2 @@
+export declare function DefaultStory(): import("react").JSX.Element;
+export declare function DisabledStory(): import("react").JSX.Element;

package/dist/src/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export type { Column, TableProps } from './table';
+export { Table } from './table';

package/dist/src/components/Table/table.css.d.ts

@@ -0,0 +1,10 @@
+export declare const root: string;
+export declare const head: string;
+export declare const header: string;
+export declare const row: string;
+export declare const cell: string;
+export declare const wrapper: string;
+export declare const alignLeft: string;
+export declare const alignCenter: string;
+export declare const alignRight: string;
+export declare const colorSecondary: string;

package/dist/src/components/Table/table.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export interface Column<TData> {
+    key: keyof TData;
+    header: ReactNode;
+    cell?: (row: TData) => ReactNode;
+    width?: string;
+    align?: "left" | "center" | "right";
+    cellProps?: Record<string, unknown>;
+}
+export interface TableProps<TData> {
+    columnData: Column<TData>[];
+    rowData: TData[];
+    rowKey?: keyof TData & string;
+    getRowProps?: (row: TData, index: number) => {
+        onMouseEnter?: () => void;
+        onMouseLeave?: () => void;
+        style?: React.CSSProperties;
+        [key: string]: unknown;
+    };
+    style?: React.CSSProperties;
+    className?: string;
+    color?: "secondary";
+}
+export declare function Table<TData>({ columnData, rowData, rowKey, getRowProps, style, className, color, }: TableProps<TData>): import("react").JSX.Element;

package/dist/src/components/Table/table.demo.d.ts

@@ -0,0 +1,5 @@
+export declare function TableDemo(): import("react").JSX.Element;
+export declare const demos: {
+    name: string;
+    component: typeof TableDemo;
+}[];

package/dist/src/components/Tabs/index.d.ts

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

package/dist/src/components/Tabs/tabs.css.d.ts

@@ -0,0 +1,27 @@
+export declare const root: string;
+export declare const rootVertical: string;
+export declare const list: string;
+export declare const listDefault: string;
+export declare const listUnderline: string;
+export declare const listUnderlineVertical: string;
+export declare const listVertical: string;
+export declare const tabActiveVertical: string;
+export declare const tabUnderlineActive: string;
+export declare const listGhost: string;
+export declare const tabGhost: string;
+export declare const tabGhostActive: string;
+export declare const listSegmented: string;
+export declare const tabSegmented: string;
+export declare const tabSegmentedActive: string;
+export declare const tab: string;
+export declare const tabDefault: string;
+export declare const tabVertical: string;
+export declare const tabActive: string;
+export declare const tabDisabled: string;
+export declare const tabActiveDefault: string;
+export declare const tabUnderline: string;
+export declare const indicator: string;
+export declare const indicatorDefault: string;
+export declare const indicatorUnderline: string;
+export declare const panel: string;
+export declare const panelVertical: string;

package/dist/src/components/Tabs/tabs.d.ts

@@ -0,0 +1,15 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import * as React from "react";
+type TabsVariant = "underline" | "ghost" | "segmented";
+type TabsRootProps = TabsPrimitive.Root.Props & {
+    variant?: TabsVariant;
+};
+type TabsListProps = TabsPrimitive.List.Props;
+type TabsTabProps = TabsPrimitive.Tab.Props;
+type TabsPanelProps = TabsPrimitive.Panel.Props;
+export declare function Tabs({ children, variant, ...props }: TabsRootProps): React.JSX.Element;
+export declare function TabsList({ className, ...props }: TabsListProps): React.JSX.Element;
+export declare function TabsTab({ className, ...props }: TabsTabProps): React.JSX.Element;
+export declare function TabsIndicator(): null;
+declare function TabsPanel({ className, ...props }: TabsPanelProps): React.JSX.Element;
+export { TabsPanel };

package/dist/src/components/Tabs/tabs.demo.d.ts

@@ -0,0 +1,5 @@
+export declare function TabsDemo(): import("react").JSX.Element;
+export declare const demos: {
+    name: string;
+    component: typeof TabsDemo;
+}[];

package/dist/src/components/Tabs/tabs.doc.d.ts

@@ -0,0 +1,3 @@
+export declare function UnderlineStory(): import("react").JSX.Element;
+export declare function GhostStory(): import("react").JSX.Element;
+export declare function SegmentedStory(): import("react").JSX.Element;

package/dist/src/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text } from './text';
+export type { TextProps } from './text';

package/dist/src/components/Text/text.css.d.ts

@@ -0,0 +1,204 @@
+export declare const textVariants: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        h1: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "48px";
+            lineHeight: "1.2";
+            fontWeight: "700";
+            letterSpacing: "-0.04em";
+            margin: number;
+            scrollMarginTop: "80px";
+        };
+        h2: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "24px";
+            lineHeight: "1.2";
+            fontWeight: "700";
+            letterSpacing: "-0.04em";
+            margin: number;
+            scrollMarginTop: "80px";
+        };
+        h3: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "20px";
+            lineHeight: "1.35";
+            fontWeight: "600";
+            letterSpacing: "-0.02em";
+            margin: number;
+            scrollMarginTop: "80px";
+        };
+        h4: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "18px";
+            lineHeight: "1.2";
+            fontWeight: "600";
+            margin: number;
+            scrollMarginTop: "80px";
+        };
+        h5: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "16px";
+            lineHeight: "1.5";
+            fontWeight: "600";
+            margin: number;
+            scrollMarginTop: "80px";
+        };
+        h6: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "14px";
+            lineHeight: "1.5";
+            fontWeight: "600";
+            margin: number;
+            scrollMarginTop: "80px";
+        };
+        body1: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "16px";
+            lineHeight: "1.5";
+            fontWeight: "400";
+            margin: number;
+        };
+        body2: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "14px";
+            lineHeight: "1.5";
+            fontWeight: "400";
+            margin: number;
+        };
+        body3: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "12px";
+            lineHeight: "1.5";
+            fontWeight: "400";
+            margin: number;
+        };
+        body4: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "10px";
+            lineHeight: "1.5";
+            fontWeight: "500";
+            letterSpacing: "0.02em";
+            margin: number;
+        };
+        caption: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "12px";
+            lineHeight: "1.5";
+            fontWeight: "500";
+            letterSpacing: "0.02em";
+            margin: number;
+        };
+        creatorNote: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "18px";
+            lineHeight: "28px";
+            fontWeight: "400";
+            fontStyle: "italic";
+            margin: number;
+        };
+        p: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "16px";
+            lineHeight: "1.5";
+            fontWeight: "400";
+            margin: number;
+        };
+        div: {
+            fontFamily: "\"DM Sans\", system-ui, sans-serif";
+            fontSize: "16px";
+            lineHeight: "1.5";
+            fontWeight: "400";
+            margin: number;
+        };
+        code: {
+            margin: number;
+            backgroundColor: `var(--${string})`;
+            borderRadius: "4px";
+        };
+    };
+    textAlign: {
+        left: {
+            textAlign: "left";
+        };
+        center: {
+            textAlign: "center";
+        };
+        right: {
+            textAlign: "right";
+        };
+    };
+    weight: {
+        regular: {
+            fontWeight: "400";
+        };
+        medium: {
+            fontWeight: "500";
+        };
+        semibold: {
+            fontWeight: "600";
+        };
+        bold: {
+            fontWeight: "700";
+        };
+    };
+    transform: {
+        uppercase: {
+            textTransform: "uppercase";
+        };
+        capitalize: {
+            textTransform: "capitalize";
+        };
+        none: {
+            textTransform: "none";
+        };
+        lowercase: {
+            textTransform: "lowercase";
+        };
+    };
+    size: {
+        xxsmall: {
+            fontSize: "4px";
+            lineHeight: "1.2";
+        };
+        xsmall: {
+            fontSize: "8px";
+            lineHeight: "1.2";
+        };
+        small: {
+            fontSize: "12px";
+            lineHeight: "1.2";
+        };
+        medium: {
+            fontSize: "16px";
+            lineHeight: "1.2";
+        };
+        large: {
+            fontSize: "24px";
+            lineHeight: "1.2";
+        };
+        xlarge: {
+            fontSize: "32px";
+            lineHeight: "1.2";
+        };
+        xxlarge: {
+            fontSize: "48px";
+            lineHeight: "1.2";
+        };
+        xxxlarge: {
+            fontSize: "64px";
+            lineHeight: "1.2";
+        };
+        huge: {
+            fontSize: "80px";
+            lineHeight: "1.2";
+        };
+        massive: {
+            fontSize: "96px";
+            lineHeight: "1.2";
+        };
+        titanic: {
+            fontSize: "192px";
+            lineHeight: "1.2";
+        };
+    };
+}>;

package/dist/src/components/Text/text.d.ts

@@ -0,0 +1,9 @@
+import { useRender } from '@base-ui/react/use-render';
+import { default as React } from 'react';
+import { textVariants } from './text.css';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+import { BaseSprinkles } from '../../utils/sprinkles.css';
+export type TextProps = useRender.ComponentProps<"div"> & BaseSprinkles & RecipeVariants<typeof textVariants> & {
+    span?: boolean;
+};
+export declare function Text({ variant, textAlign, weight, className, color, style, size, render, span, transform, ...props }: TextProps): React.ReactElement;

package/dist/src/components/Text/text.doc.d.ts

@@ -0,0 +1,4 @@
+export declare function VariantsStory(): import("react").JSX.Element;
+export declare function ColorsStory(): import("react").JSX.Element;
+export declare function WeightsStory(): import("react").JSX.Element;
+export declare function AlignmentsStory(): import("react").JSX.Element;

package/dist/src/components/Textarea/index.d.ts

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

package/dist/src/components/Textarea/textarea.css.d.ts

@@ -0,0 +1,4 @@
+export declare const shell: string;
+export declare const textarea: string;
+export declare const textareaSm: string;
+export declare const textareaLg: string;

package/dist/src/components/Textarea/textarea.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & React.RefAttributes<HTMLTextAreaElement> & {
+    size?: "sm" | "default" | "lg" | number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function Textarea({ size, className, style, ref, ...props }: TextareaProps): React.ReactElement;

package/dist/src/components/Textarea/textarea.doc.d.ts

@@ -0,0 +1,2 @@
+export declare function SizesStory(): import("react").JSX.Element;
+export declare function DisabledStory(): import("react").JSX.Element;

package/dist/src/components/Toggle/index.d.ts

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

package/dist/src/components/Toggle/toggle.css.d.ts

@@ -0,0 +1,68 @@
+export declare const base: string;
+export declare const size: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            height: "24px";
+            minWidth: "24px";
+            paddingLeft: "12px";
+            paddingRight: "12px";
+        };
+        default: {
+            height: "24px";
+            minWidth: number;
+            paddingLeft: "12px";
+            paddingRight: "12px";
+        };
+        lg: {
+            height: "32px";
+            paddingLeft: "16px";
+            paddingRight: "16px";
+        };
+    };
+}>;
+export declare const variant: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {
+            borderColor: "transparent";
+            color: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+        };
+        outline: {
+            borderColor: `var(--${string})`;
+            color: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const pressed: {
+    default: string;
+    outline: string;
+};
+export declare const radius: import('@vanilla-extract/recipes').RuntimeFn<{
+    radius: {
+        none: {
+            borderRadius: number;
+        };
+        xsmall: {
+            borderRadius: "2px";
+        };
+        small: {
+            borderRadius: "4px";
+        };
+        medium: {
+            borderRadius: "8px";
+        };
+        large: {
+            borderRadius: "12px";
+        };
+        xlarge: {
+            borderRadius: "16px";
+        };
+        xxlarge: {
+            borderRadius: "24px";
+        };
+        full: {
+            borderRadius: "999px";
+        };
+    };
+}>;

package/dist/src/components/Toggle/toggle.d.ts

@@ -0,0 +1,12 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "default" | "sm" | "lg";
+export type ToggleRadius = "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "full";
+export interface ToggleProps extends Omit<TogglePrimitive.Props, "className" | "style"> {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+    className?: string;
+    style?: React.CSSProperties;
+    radius?: ToggleRadius;
+}
+export declare function Toggle({ children, className, style, variant: v, radius: r, size: s, ...props }: ToggleProps): import("react").JSX.Element;

package/dist/src/components/Toggle/toggle.doc.d.ts

@@ -0,0 +1 @@
+export declare function VariantsStory(): import("react").JSX.Element;

package/dist/src/components/ToggleGroup/index.d.ts

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

package/dist/src/components/ToggleGroup/toggle-group.css.d.ts

@@ -0,0 +1,7 @@
+export declare const groupBase: string;
+export declare const groupHorizontal: string;
+export declare const groupVertical: string;
+export declare const groupDefault: string;
+export declare const groupOutline: string;
+export declare const outlineItemHorizontal: string;
+export declare const outlineItemVertical: string;