@loke/design-system
Version:
A design system with individually importable components
29 lines (28 loc) • 1.73 kB
text/typescript
import { type ResponsiveProps } from "@loke/design-system/responsive";
import { type VariantProps } from "class-variance-authority";
import type { ReactNode } from "react";
declare const columnsVariants: (props?: ({
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 9 | 10 | 11 | "auto-fill" | null | undefined;
gap?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type ColumnsVariants = VariantProps<typeof columnsVariants>;
interface ColumnsProps extends ResponsiveProps<ColumnsVariants> {
/** The content to be rendered inside the columns */
children: ReactNode;
/** Optional className for additional styling */
className?: string;
}
declare const Columns: ({ children, columns, gap, className }: ColumnsProps) => import("react/jsx-runtime").JSX.Element;
declare const columnVariants: (props?: ({
colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 9 | 10 | 11 | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type ColumnVariants = VariantProps<typeof columnVariants>;
interface ColumnProps extends ResponsiveProps<ColumnVariants> {
/** The content to be rendered inside the column */
children: ReactNode;
/** Optional className for additional styling */
className?: string;
}
declare const Column: ({ children, colSpan, className }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
export { Column, Columns, columnsVariants, columnVariants };
export type { ColumnProps, ColumnsProps, ColumnsVariants, ColumnVariants };