@vaneui/ui 0.0.1 → 0.0.3

package/src/components/ui/commonValues.ts

@@ -1,51 +1,51 @@
-export const fontWeightClasses = {
-  thin: "font-thin",
-  extralight: "font-extralight",
-  light: "font-light",
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold",
-  extrabold: "font-extrabold",
-  black: "font-black",
-}
-
-export const fontStyleClasses = {
-  italic: "italic",
-  notItalic: "not-italic",
-}
-
-export const fontFamilyClasses = {
-  sans: "font-sans",
-  serif: "font-serif",
-  mono: "font-mono",
-}
-
-export const textDecorationClasses = {
-  underline: "underline",
-  lineThrough: "line-through",
-  noUnderline: "no-underline",
-  overline: "overline",
-}
-
-export const textTransformClasses = {
-  uppercase: "uppercase",
-  lowercase: "lowercase",
-  capitalize: "capitalize",
-  normalCase: "normal-case",
-}
-
-export const textAppearanceClasses = {
-  default: "text-(--text-color-default)",
-  primary: "text-(--text-color-primary)",
-  secondary: "text-(--text-color-secondary)",
-  tertiary: "text-(--text-color-tertiary)",
-  muted: "text-(--text-color-muted)",
-  link: "text-(--text-color-link)",
-
-  accent: "text-(--text-color-accent)",
-  success: "text-(--text-color-success)",
-  danger: "text-(--text-color-danger)",
-  warning: "text-(--text-color-warning)",
-  info: "text-(--text-color-info)",
-}
+export const fontWeightClasses = {
+  thin: "font-thin",
+  extralight: "font-extralight",
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+  extrabold: "font-extrabold",
+  black: "font-black",
+}
+
+export const fontStyleClasses = {
+  italic: "italic",
+  notItalic: "not-italic",
+}
+
+export const fontFamilyClasses = {
+  sans: "font-sans",
+  serif: "font-serif",
+  mono: "font-mono",
+}
+
+export const textDecorationClasses = {
+  underline: "underline",
+  lineThrough: "line-through",
+  noUnderline: "no-underline",
+  overline: "overline",
+}
+
+export const textTransformClasses = {
+  uppercase: "uppercase",
+  lowercase: "lowercase",
+  capitalize: "capitalize",
+  normalCase: "normal-case",
+}
+
+export const textAppearanceClasses = {
+  default: "text-(--text-color-default)",
+  primary: "text-(--text-color-primary)",
+  secondary: "text-(--text-color-secondary)",
+  tertiary: "text-(--text-color-tertiary)",
+  muted: "text-(--text-color-muted)",
+  link: "text-(--text-color-link)",
+
+  accent: "text-(--text-color-accent)",
+  success: "text-(--text-color-success)",
+  danger: "text-(--text-color-danger)",
+  warning: "text-(--text-color-warning)",
+  info: "text-(--text-color-info)",
+}

package/src/components/ui/divider.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { componentBuilder } from "./utils";
-import { BaseComponentProps } from "./props";
-
-export const Divider: React.FC<BaseComponentProps> = (props) =>
-  componentBuilder(props, "div", "bg-gray-200 w-full h-px")
-    .build();
+import React from 'react';
+import { componentBuilder } from "./utils";
+import { BaseComponentProps } from "./props";
+
+export const Divider: React.FC<BaseComponentProps> = (props) =>
+  componentBuilder(props, "div", "bg-gray-200 w-full h-px")
+    .build();

package/src/components/ui/layout.tsx

@@ -1,102 +1,102 @@
-import React from 'react';
-import { GridProps, LayoutComponentProps, ColProps, RowProps } from "./props";
-import { componentBuilder } from "./utils";
-
-const centeredClasses = {
-  centered: "items-center justify-center",
-  vCentered: "items-center",
-  hCentered: "justify-center"
-}
-
-export const Section: React.FC<LayoutComponentProps> = (props) =>
-  componentBuilder(props, "section", "w-full flex flex-col items-start")
-    .withCentered(centeredClasses)
-    .withSizes({
-      xs: "py-6  max-lg:py-4  max-md:py-2",
-      sm: "py-8  max-lg:py-6  max-md:py-4",
-      md: "py-10 max-lg:py-8  max-md:py-6",
-      lg: "py-12 max-lg:py-10 max-md:py-8",
-      xl: "py-14 max-lg:py-12 max-md:py-10",
-    })
-    .withSizes({
-      xs: "px-4  max-lg:px-2  max-md:px-0",
-      sm: "px-6  max-lg:px-6  max-md:px-2",
-      md: "px-8  max-lg:px-6  max-md:px-4",
-      lg: "px-10 max-lg:px-8  max-md:px-6",
-      xl: "px-12 max-lg:px-10 max-md:px-8",
-    })
-    .build();
-
-export const Container: React.FC<LayoutComponentProps> = (props) =>
-  componentBuilder(props, "div", "flex flex-col mx-auto w-full")
-    .withCentered(centeredClasses)
-    .withSizes({
-      xs: "max-w-3xl gap-2  max-lg:gap-1",
-      sm: "max-w-4xl gap-4  max-lg:gap-3 max-md:gap-2",
-      md: "max-w-5xl gap-6  max-lg:gap-5 max-md:gap-4",
-      lg: "max-w-6xl gap-8  max-lg:gap-7 max-md:gap-6",
-      xl: "max-w-7xl gap-10 max-lg:gap-9 max-md:gap-8",
-    })
-    .build();
-
-const commonGaps = {
-  xs: "gap-1",
-  sm: "gap-2 max-lg:gap-1",
-  md: "gap-4 max-lg:gap-3 max-md:gap-2",
-  lg: "gap-6 max-lg:gap-5 max-md:gap-4",
-  xl: "gap-8 max-lg:gap-7 max-md:gap-6",
-}
-
-export const Col: React.FC<ColProps> = (props) =>
-  componentBuilder(props, "div", "flex flex-col")
-    .withGaps({ noGap: "gap-0" }, commonGaps)
-    .withReverse({
-      reverse: "flex-col-reverse"
-    })
-    .withCentered(centeredClasses)
-    .build();
-
-export const Row: React.FC<RowProps> = (props) =>
-  componentBuilder(props, "div", "flex flex-row")
-    .withGaps({ noGap: "gap-0" }, commonGaps)
-    .withReverse({
-      reverse: "flex-row-reverse"
-    })
-    .withCentered(centeredClasses)
-    .withBreakpoints({
-      xsCol: "max-xs:flex-col",
-      smCol: "max-sm:flex-col",
-      mdCol: "max-md:flex-col",
-      lgCol: "max-lg:flex-col",
-      xlCol: "max-xl:flex-col"
-    })
-    .withBooleanProps({
-      justifyStart: "justify-start",
-      justifyEnd: "justify-end",
-      justifyCenter: "justify-center",
-      justifyBetween: "justify-between",
-      justifyAround: "justify-around",
-      justifyEvenly: "justify-evenly",
-      justifyStretch: "justify-stretch",
-      justifyBaseline: "justify-baseline",
-    })
-    .build();
-
-const gridGaps = {
-  xs: "gap-2",
-  sm: "gap-4  max-lg:gap-2",
-  md: "gap-6  max-lg:gap-4",
-  lg: "gap-8  max-lg:gap-6 max-md:gap-4",
-  xl: "gap-10 max-lg:gap-8 max-md:gap-6",
-}
-
-export const Grid3: React.FC<GridProps> = (props) =>
-  componentBuilder(props, "div", "w-full grid grid-cols-3 max-lg:grid-cols-2 max-md:grid-cols-1")
-    .withGaps({ noGap: "gap-0" }, gridGaps)
-    .build();
-
-export const Grid4: React.FC<GridProps> = (props) =>
-  componentBuilder(props, "div", "w-full grid grid-cols-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1")
-    .withGaps({ noGap: "gap-0" }, gridGaps)
-    .build();
-
+import React from 'react';
+import { GridProps, LayoutComponentProps, ColProps, RowProps } from "./props";
+import { componentBuilder } from "./utils";
+
+const centeredClasses = {
+  centered: "items-center justify-center",
+  vCentered: "items-center",
+  hCentered: "justify-center"
+}
+
+export const Section: React.FC<LayoutComponentProps> = (props) =>
+  componentBuilder(props, "section", "w-full flex flex-col items-start")
+    .withCentered(centeredClasses)
+    .withSizes({
+      xs: "py-6  max-lg:py-4  max-md:py-2",
+      sm: "py-8  max-lg:py-6  max-md:py-4",
+      md: "py-10 max-lg:py-8  max-md:py-6",
+      lg: "py-12 max-lg:py-10 max-md:py-8",
+      xl: "py-14 max-lg:py-12 max-md:py-10",
+    })
+    .withSizes({
+      xs: "px-4  max-lg:px-2  max-md:px-0",
+      sm: "px-6  max-lg:px-6  max-md:px-2",
+      md: "px-8  max-lg:px-6  max-md:px-4",
+      lg: "px-10 max-lg:px-8  max-md:px-6",
+      xl: "px-12 max-lg:px-10 max-md:px-8",
+    })
+    .build();
+
+export const Container: React.FC<LayoutComponentProps> = (props) =>
+  componentBuilder(props, "div", "flex flex-col mx-auto w-full")
+    .withCentered(centeredClasses)
+    .withSizes({
+      xs: "max-w-3xl gap-2  max-lg:gap-1",
+      sm: "max-w-4xl gap-4  max-lg:gap-3 max-md:gap-2",
+      md: "max-w-5xl gap-6  max-lg:gap-5 max-md:gap-4",
+      lg: "max-w-6xl gap-8  max-lg:gap-7 max-md:gap-6",
+      xl: "max-w-7xl gap-10 max-lg:gap-9 max-md:gap-8",
+    })
+    .build();
+
+const commonGaps = {
+  xs: "gap-1",
+  sm: "gap-2 max-lg:gap-1",
+  md: "gap-4 max-lg:gap-3 max-md:gap-2",
+  lg: "gap-6 max-lg:gap-5 max-md:gap-4",
+  xl: "gap-8 max-lg:gap-7 max-md:gap-6",
+}
+
+export const Col: React.FC<ColProps> = (props) =>
+  componentBuilder(props, "div", "flex flex-col")
+    .withGaps({ noGap: "gap-0" }, commonGaps)
+    .withReverse({
+      reverse: "flex-col-reverse"
+    })
+    .withCentered(centeredClasses)
+    .build();
+
+export const Row: React.FC<RowProps> = (props) =>
+  componentBuilder(props, "div", "flex flex-row")
+    .withGaps({ noGap: "gap-0" }, commonGaps)
+    .withReverse({
+      reverse: "flex-row-reverse"
+    })
+    .withCentered(centeredClasses)
+    .withBreakpoints({
+      xsCol: "max-xs:flex-col",
+      smCol: "max-sm:flex-col",
+      mdCol: "max-md:flex-col",
+      lgCol: "max-lg:flex-col",
+      xlCol: "max-xl:flex-col"
+    })
+    .withBooleanProps({
+      justifyStart: "justify-start",
+      justifyEnd: "justify-end",
+      justifyCenter: "justify-center",
+      justifyBetween: "justify-between",
+      justifyAround: "justify-around",
+      justifyEvenly: "justify-evenly",
+      justifyStretch: "justify-stretch",
+      justifyBaseline: "justify-baseline",
+    })
+    .build();
+
+const gridGaps = {
+  xs: "gap-2",
+  sm: "gap-4  max-lg:gap-2",
+  md: "gap-6  max-lg:gap-4",
+  lg: "gap-8  max-lg:gap-6 max-md:gap-4",
+  xl: "gap-10 max-lg:gap-8 max-md:gap-6",
+}
+
+export const Grid3: React.FC<GridProps> = (props) =>
+  componentBuilder(props, "div", "w-full grid grid-cols-3 max-lg:grid-cols-2 max-md:grid-cols-1")
+    .withGaps({ noGap: "gap-0" }, gridGaps)
+    .build();
+
+export const Grid4: React.FC<GridProps> = (props) =>
+  componentBuilder(props, "div", "w-full grid grid-cols-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1")
+    .withGaps({ noGap: "gap-0" }, gridGaps)
+    .build();
+

package/src/components/ui/props.ts

@@ -1,128 +1,128 @@
-export interface SizeProps {
-  xs?: boolean;
-  sm?: boolean;
-  md?: boolean;
-  lg?: boolean;
-  xl?: boolean;
-}
-
-export interface FontFamilyProps {
-  sans?: boolean;
-  serif?: boolean;
-  mono?: boolean;
-}
-
-export interface FontWeightProps {
-  thin?: boolean;
-  extralight?: boolean;
-  light?: boolean;
-  normal?: boolean;
-  medium?: boolean;
-  semibold?: boolean;
-  bold?: boolean;
-  extrabold?: boolean;
-  black?: boolean;
-}
-
-export interface FontStyleProps {
-  italic?: boolean;
-  notItalic?: boolean;
-}
-
-export interface TextDecorationProps {
-  underline?: boolean;
-  lineThrough?: boolean;
-  noUnderline?: boolean;
-  overline?: boolean;
-}
-
-export interface TextTransformProps {
-  uppercase?: boolean;
-  lowercase?: boolean;
-  capitalize?: boolean;
-  normalCase?: boolean;
-}
-
-export interface TextAppearanceProps {
-  muted?: boolean;
-  link?: boolean;
-}
-
-export interface CommonAppearanceProps {
-  default?: boolean;
-  accent?: boolean;
-  primary?: boolean;
-  secondary?: boolean;
-  tertiary?: boolean;
-  success?: boolean;
-  danger?: boolean;
-  warning?: boolean;
-  info?: boolean;
-}
-
-export interface BreakpointProps {
-  xsCol?: boolean;
-  smCol?: boolean;
-  mdCol?: boolean;
-  lgCol?: boolean;
-  xlCol?: boolean;
-}
-
-export interface HideProps {
-  xsHide?: boolean;
-  smHide?: boolean;
-  mdHide?: boolean;
-  lgHide?: boolean;
-  xlHide?: boolean;
-}
-
-export interface PositionProps {
-  relative?: boolean;
-  absolute?: boolean;
-  fixed?: boolean;
-  sticky?: boolean;
-  static?: boolean;
-}
-
-export interface TagProps {
-  tag?: React.ElementType | string;
-}
-
-export interface ReverseProps {
-  reverse?: boolean;
-}
-
-export interface GapProps {
-  noGap?: boolean;
-}
-
-export interface CenteredProps {
-  centered?: boolean;
-  vCentered?: boolean;
-  hCentered?: boolean;
-}
-
-export interface JustifyProps {
-  justifyStart?: boolean;
-  justifyEnd?: boolean;
-  justifyCenter?: boolean;
-  justifyBetween?: boolean;
-  justifyAround?: boolean;
-  justifyEvenly?: boolean;
-  justifyStretch?: boolean;
-  justifyBaseline?: boolean;
-}
-
-export type BaseComponentProps = TagProps & Partial<SizeProps & HideProps & PositionProps> & React.HTMLProps<HTMLElement>;
-
-export type LayoutComponentProps = BaseComponentProps & ReverseProps & CenteredProps;
-
-export type FontProps = FontWeightProps & FontStyleProps & TextDecorationProps & TextTransformProps & FontFamilyProps & TextAppearanceProps & CommonAppearanceProps;
-
-export type TypographyComponentProps = BaseComponentProps & FontProps;
-
-export type GridProps = BaseComponentProps & GapProps;
-
-export type RowProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps & BreakpointProps & JustifyProps;
-
-export type ColProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps;
+export interface SizeProps {
+  xs?: boolean;
+  sm?: boolean;
+  md?: boolean;
+  lg?: boolean;
+  xl?: boolean;
+}
+
+export interface FontFamilyProps {
+  sans?: boolean;
+  serif?: boolean;
+  mono?: boolean;
+}
+
+export interface FontWeightProps {
+  thin?: boolean;
+  extralight?: boolean;
+  light?: boolean;
+  normal?: boolean;
+  medium?: boolean;
+  semibold?: boolean;
+  bold?: boolean;
+  extrabold?: boolean;
+  black?: boolean;
+}
+
+export interface FontStyleProps {
+  italic?: boolean;
+  notItalic?: boolean;
+}
+
+export interface TextDecorationProps {
+  underline?: boolean;
+  lineThrough?: boolean;
+  noUnderline?: boolean;
+  overline?: boolean;
+}
+
+export interface TextTransformProps {
+  uppercase?: boolean;
+  lowercase?: boolean;
+  capitalize?: boolean;
+  normalCase?: boolean;
+}
+
+export interface TextAppearanceProps {
+  muted?: boolean;
+  link?: boolean;
+}
+
+export interface CommonAppearanceProps {
+  default?: boolean;
+  accent?: boolean;
+  primary?: boolean;
+  secondary?: boolean;
+  tertiary?: boolean;
+  success?: boolean;
+  danger?: boolean;
+  warning?: boolean;
+  info?: boolean;
+}
+
+export interface BreakpointProps {
+  xsCol?: boolean;
+  smCol?: boolean;
+  mdCol?: boolean;
+  lgCol?: boolean;
+  xlCol?: boolean;
+}
+
+export interface HideProps {
+  xsHide?: boolean;
+  smHide?: boolean;
+  mdHide?: boolean;
+  lgHide?: boolean;
+  xlHide?: boolean;
+}
+
+export interface PositionProps {
+  relative?: boolean;
+  absolute?: boolean;
+  fixed?: boolean;
+  sticky?: boolean;
+  static?: boolean;
+}
+
+export interface TagProps {
+  tag?: React.ElementType | string;
+}
+
+export interface ReverseProps {
+  reverse?: boolean;
+}
+
+export interface GapProps {
+  noGap?: boolean;
+}
+
+export interface CenteredProps {
+  centered?: boolean;
+  vCentered?: boolean;
+  hCentered?: boolean;
+}
+
+export interface JustifyProps {
+  justifyStart?: boolean;
+  justifyEnd?: boolean;
+  justifyCenter?: boolean;
+  justifyBetween?: boolean;
+  justifyAround?: boolean;
+  justifyEvenly?: boolean;
+  justifyStretch?: boolean;
+  justifyBaseline?: boolean;
+}
+
+export type BaseComponentProps = TagProps & Partial<SizeProps & HideProps & PositionProps> & React.HTMLProps<HTMLElement>;
+
+export type LayoutComponentProps = BaseComponentProps & ReverseProps & CenteredProps;
+
+export type FontProps = FontWeightProps & FontStyleProps & TextDecorationProps & TextTransformProps & FontFamilyProps & TextAppearanceProps & CommonAppearanceProps;
+
+export type TypographyComponentProps = BaseComponentProps & FontProps;
+
+export type GridProps = BaseComponentProps & GapProps;
+
+export type RowProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps & BreakpointProps & JustifyProps;
+
+export type ColProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps;

package/src/components/ui/settings.ts

@@ -1,19 +1,19 @@
-import { CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, TextAppearanceProps, TextDecorationProps, TextTransformProps } from "./props";
-
-export type CommonAppearanceSettings = { [key in keyof CommonAppearanceProps]: boolean; };
-
-export type FontFamilySettings = { [key in keyof FontFamilyProps]: boolean; };
-export type FontWeightSettings = { [key in keyof FontWeightProps]: boolean; };
-export type FontStyleSettings = { [key in keyof FontStyleProps]: boolean; };
-export type TextAppearanceSettings = { [key in keyof TextAppearanceProps & CommonAppearanceProps]: boolean; };
-export type TextDecorationSettings = { [key in keyof TextDecorationProps]: boolean; };
-export type TextTransformSettings = { [key in keyof TextTransformProps]: boolean; };
-
-export type TypographySettings = {
-  fontFamily?: FontFamilySettings;
-  fontWeight?: FontWeightSettings;
-  fontStyle?: FontStyleSettings;
-  textAppearance?: TextAppearanceSettings;
-  textDecoration?: TextDecorationSettings;
-  textTransform?: TextTransformSettings;
-};
+import { CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, TextAppearanceProps, TextDecorationProps, TextTransformProps } from "./props";
+
+export type CommonAppearanceSettings = { [key in keyof CommonAppearanceProps]: boolean; };
+
+export type FontFamilySettings = { [key in keyof FontFamilyProps]: boolean; };
+export type FontWeightSettings = { [key in keyof FontWeightProps]: boolean; };
+export type FontStyleSettings = { [key in keyof FontStyleProps]: boolean; };
+export type TextAppearanceSettings = { [key in keyof TextAppearanceProps & CommonAppearanceProps]: boolean; };
+export type TextDecorationSettings = { [key in keyof TextDecorationProps]: boolean; };
+export type TextTransformSettings = { [key in keyof TextTransformProps]: boolean; };
+
+export type TypographySettings = {
+  fontFamily?: FontFamilySettings;
+  fontWeight?: FontWeightSettings;
+  fontStyle?: FontStyleSettings;
+  textAppearance?: TextAppearanceSettings;
+  textDecoration?: TextDecorationSettings;
+  textTransform?: TextTransformSettings;
+};