@vaneui/ui 0.2.1-alpha.20250809183306.228d648 → 0.2.1-alpha.20250810082253.4d2c8c2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,7 +16,7 @@ import { GridTheme } from "./ui/theme/gridTheme";
16
16
  import { CheckboxTheme, CheckTheme, CheckboxWrapperTheme } from './ui/theme/checkboxTheme';
17
17
  import { LabelTheme } from './ui/theme/labelTheme';
18
18
  import { ImgTheme } from './ui/theme/imgTheme';
19
- import { BadgeProps, ButtonProps, CardProps, ChipProps, CodeProps, ColProps, ContainerProps, DividerProps, GridProps, ListProps, RowProps, SectionProps, StackProps, TypographyProps, LinkProps, CheckboxProps, LabelProps, ImgProps } from "./ui/props";
19
+ import { BadgeProps, ButtonProps, CardProps, ChipProps, CodeProps, ColProps, ContainerProps, DividerProps, GridProps, ListProps, RowProps, SectionProps, StackProps, TypographyProps, CheckboxProps, LabelProps, ImgProps } from "./ui/props";
20
20
  import { DeepPartial } from "./utils/deepPartial";
21
21
  export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
22
22
  export type ComponentKey = typeof COMPONENT[number];
@@ -38,7 +38,7 @@ export interface ThemeProps {
38
38
  sectionTitle: ComponentTheme<TypographyProps, TypographyTheme>;
39
39
  title: ComponentTheme<TypographyProps, TypographyTheme>;
40
40
  text: ComponentTheme<TypographyProps, TypographyTheme>;
41
- link: ComponentTheme<LinkProps, TypographyTheme>;
41
+ link: ComponentTheme<TypographyProps, TypographyTheme>;
42
42
  listItem: ComponentTheme<TypographyProps, TypographyTheme>;
43
43
  list: ComponentTheme<ListProps, ListTheme>;
44
44
  checkbox: {
@@ -1,6 +1,12 @@
1
+ import React from "react";
1
2
  import { ComponentTheme } from "./ui/theme/common/ComponentTheme";
2
- import { ComponentProps } from "./ui/props/props";
3
+ type ComponentProps = {
4
+ className?: string;
5
+ children?: React.ReactNode;
6
+ tag?: React.ElementType;
7
+ };
3
8
  export type ThemedComponentProps<P extends ComponentProps, T extends object> = P & {
4
9
  theme: ComponentTheme<any, T>;
5
10
  };
6
11
  export declare function ThemedComponent<P extends ComponentProps, T extends object>(allProps: ThemedComponentProps<P, T>): import("react/jsx-runtime").JSX.Element;
12
+ export {};
@@ -10,35 +10,52 @@ type ComponentPropsFromCategories<T extends ReadonlyArray<ComponentCategoryKey>>
10
10
  [Cat in T[number]]: (typeof ComponentKeys)[Cat][number];
11
11
  }[T[number]]]?: boolean;
12
12
  };
13
- type NativeProps<E extends React.ElementType> = React.ComponentPropsWithoutRef<E>;
14
13
  type Base = {
15
14
  className?: string;
16
15
  children?: React.ReactNode;
17
- tag?: React.ReactNode | string | any;
18
16
  };
19
17
  type Cats<T extends ReadonlyArray<ComponentCategoryKey>> = ComponentPropsFromCategories<T>;
20
- export type Linkable<E extends React.ElementType, Own = {}> = (Own & Omit<NativeProps<E>, keyof Own | "href"> & {
18
+ type ElementOf<E extends React.ElementType> = React.ComponentPropsWithoutRef<E>;
19
+ type WithTag<E extends React.ElementType, Own> = Own & Omit<ElementOf<E>, keyof Own | "tag" | "href"> & {
20
+ tag?: React.ElementType;
21
21
  href?: never;
22
- }) | (Own & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof Own> & {
22
+ };
23
+ type LinkLikeProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
24
+ href: string;
25
+ };
26
+ type LinkLikeComponent = React.ComponentType<LinkLikeProps>;
27
+ type LinkBranch<Own> = Own & Omit<LinkLikeProps, keyof Own | "tag"> & {
23
28
  href: string;
24
- });
25
- export type ButtonProps = Linkable<"button", Base> & Cats<typeof BUTTON_CATEGORIES>;
26
- export type BadgeProps = Linkable<"span", Base> & Cats<typeof BADGE_CATEGORIES>;
27
- export type ChipProps = Linkable<"span", Base> & Cats<typeof CHIP_CATEGORIES>;
28
- export type GridProps = Linkable<"div", Base> & Cats<typeof GRID_CATEGORIES>;
29
- export type RowProps = Linkable<"div", Base> & Cats<typeof ROW_CATEGORIES>;
30
- export type ColProps = Linkable<"div", Base> & Cats<typeof COL_CATEGORIES>;
31
- export type CardProps = Linkable<"div", Base> & Cats<typeof CARD_CATEGORIES>;
32
- export type StackProps = Linkable<"div", Base> & Cats<typeof STACK_CATEGORIES>;
33
- export type SectionProps = Linkable<"div", Base> & Cats<typeof SECTION_CATEGORIES>;
34
- export type ContainerProps = Linkable<"div", Base> & Cats<typeof CONTAINER_CATEGORIES>;
35
- export type TypographyProps = Linkable<"span", Base> & Cats<typeof TYPOGRAPHY_CATEGORIES>;
36
- export type DividerProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof DIVIDER_CATEGORIES>;
37
- export type CodeProps = (Base & React.HTMLAttributes<HTMLElement>) & Cats<typeof CODE_CATEGORIES>;
38
- export type ListProps = (Base & React.HTMLAttributes<HTMLElement>) & Cats<typeof LIST_CATEGORIES>;
39
- export type CheckboxProps = (Base & React.InputHTMLAttributes<HTMLInputElement>) & Cats<typeof CHECKBOX_CATEGORIES>;
40
- export type LabelProps = (Base & React.LabelHTMLAttributes<HTMLLabelElement>) & Cats<typeof LABEL_CATEGORIES>;
41
- export type ImgProps = (Base & React.ImgHTMLAttributes<HTMLImageElement>) & Cats<typeof IMG_CATEGORIES>;
42
- export type LinkProps = TypographyProps;
43
- export type ComponentProps = Base & React.HTMLAttributes<HTMLElement>;
29
+ tag?: "a" | LinkLikeComponent;
30
+ };
31
+ type TagOrHref<E extends React.ElementType, Own> = WithTag<E, Own> | LinkBranch<Own>;
32
+ export type ButtonProps<E extends React.ElementType = "button"> = TagOrHref<E, Base & Cats<typeof BUTTON_CATEGORIES>>;
33
+ export type BadgeProps<E extends React.ElementType = "span"> = TagOrHref<E, Base & Cats<typeof BADGE_CATEGORIES>>;
34
+ export type ChipProps<E extends React.ElementType = "span"> = TagOrHref<E, Base & Cats<typeof CHIP_CATEGORIES>>;
35
+ export type GridProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof GRID_CATEGORIES>>;
36
+ export type RowProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof ROW_CATEGORIES>>;
37
+ export type ColProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof COL_CATEGORIES>>;
38
+ export type CardProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof CARD_CATEGORIES>>;
39
+ export type StackProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof STACK_CATEGORIES>>;
40
+ export type SectionProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof SECTION_CATEGORIES>>;
41
+ export type ContainerProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof CONTAINER_CATEGORIES>>;
42
+ export type TypographyProps<E extends React.ElementType = "span"> = TagOrHref<E, Base & Cats<typeof TYPOGRAPHY_CATEGORIES>>;
43
+ export type DividerProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof DIVIDER_CATEGORIES> & {
44
+ tag?: React.ElementType;
45
+ };
46
+ export type CodeProps = (Base & React.HTMLAttributes<HTMLElement>) & Cats<typeof CODE_CATEGORIES> & {
47
+ tag?: React.ElementType;
48
+ };
49
+ export type ListProps = (Base & React.HTMLAttributes<HTMLElement>) & Cats<typeof LIST_CATEGORIES> & {
50
+ tag?: React.ElementType;
51
+ };
52
+ export type CheckboxProps = (Base & React.InputHTMLAttributes<HTMLInputElement>) & Cats<typeof CHECKBOX_CATEGORIES> & {
53
+ tag?: React.ElementType;
54
+ };
55
+ export type LabelProps = (Base & React.LabelHTMLAttributes<HTMLLabelElement>) & Cats<typeof LABEL_CATEGORIES> & {
56
+ tag?: React.ElementType;
57
+ };
58
+ export type ImgProps = (Base & React.ImgHTMLAttributes<HTMLImageElement>) & Cats<typeof IMG_CATEGORIES> & {
59
+ tag?: React.ElementType;
60
+ };
44
61
  export {};
@@ -13,7 +13,11 @@ import { TextTransformTheme } from "../typography/textTransformTheme";
13
13
  import { TextAlignTheme } from "../typography/textAlignTheme";
14
14
  import { DeepPartial } from "../../../utils/deepPartial";
15
15
  import { DisplayTheme } from "../layout/displayTheme";
16
- import { ComponentProps } from "../../props/props";
16
+ type ComponentProps = {
17
+ className?: string;
18
+ children?: React.ReactNode;
19
+ tag?: React.ElementType;
20
+ };
17
21
  import { OverflowTheme } from "../layout/overflowTheme";
18
22
  type ThemeNode<P> = BaseTheme | ThemeMap<P>;
19
23
  export type ThemeMap<P> = {
@@ -1,9 +1,9 @@
1
1
  import { JSX } from 'react';
2
- import { TypographyProps, LinkProps, ListProps } from './props/props';
2
+ import { TypographyProps, ListProps } from './props/props';
3
3
  export declare const PageTitle: (props: TypographyProps) => JSX.Element;
4
4
  export declare const SectionTitle: (props: TypographyProps) => JSX.Element;
5
5
  export declare const Title: (props: TypographyProps) => JSX.Element;
6
6
  export declare const Text: (props: TypographyProps) => JSX.Element;
7
- export declare const Link: (props: LinkProps) => JSX.Element;
7
+ export declare const Link: (props: TypographyProps) => JSX.Element;
8
8
  export declare const ListItem: (props: TypographyProps) => JSX.Element;
9
9
  export declare const List: (props: ListProps) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.2.1-alpha.20250809183306.228d648",
3
+ "version": "0.2.1-alpha.20250810082253.4d2c8c2",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",