@code0-tech/pictor 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,12 +1,62 @@
-import React, { ReactNode, HTMLProps, DetailedHTMLProps, AnchorHTMLAttributes, ReactElement, InputHTMLAttributes } from 'react';
+import React, { HTMLProps, ReactNode, ReactElement, DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { TablerIconsProps } from '@tabler/icons-react';
 import { PositionProps, OverlayTriggerProps } from '@react-types/overlays';
 import { AriaMenuProps, Key } from 'react-aria';
 
 type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
-type Size = "xs" | "sm" | "md" | "lg" | "xl";
+type Code0Sizes = "xs" | "sm" | "md" | "lg" | "xl";
+type Code0FontSizes = "0.75" | "0.8" | "1" | "1.2" | "1.25";
+type StyleProp<Value> = Value;
+interface Code0ComponentProps {
+    m?: StyleProp<number | `${number}`>;
+    my?: StyleProp<number | `${number}`>;
+    mx?: StyleProp<number | `${number}`>;
+    mt?: StyleProp<number | `${number}`>;
+    mb?: StyleProp<number | `${number}`>;
+    ml?: StyleProp<number | `${number}`>;
+    mr?: StyleProp<number | `${number}`>;
+    p?: StyleProp<number | `${number}`>;
+    py?: StyleProp<number | `${number}`>;
+    px?: StyleProp<number | `${number}`>;
+    pt?: StyleProp<number | `${number}`>;
+    pb?: StyleProp<number | `${number}`>;
+    pl?: StyleProp<number | `${number}`>;
+    pr?: StyleProp<number | `${number}`>;
+    bg?: React.CSSProperties['backgroundColor'];
+    c?: React.CSSProperties['color'];
+    opacity?: React.CSSProperties['opacity'];
+    ff?: StyleProp<'mono' | 'text' | 'heading' | (string & {})>;
+    fz?: StyleProp<Code0FontSizes | number | `${number}`>;
+    fw?: StyleProp<React.CSSProperties['fontWeight']>;
+    lts?: StyleProp<React.CSSProperties['letterSpacing']>;
+    ta?: StyleProp<React.CSSProperties['textAlign']>;
+    lh?: StyleProp<number | (string & {})>;
+    fs?: StyleProp<React.CSSProperties['fontStyle']>;
+    tt?: StyleProp<React.CSSProperties['textTransform']>;
+    td?: StyleProp<React.CSSProperties['textDecoration']>;
+    w?: StyleProp<React.CSSProperties['width']>;
+    miw?: StyleProp<React.CSSProperties['minWidth']>;
+    maw?: StyleProp<React.CSSProperties['maxWidth']>;
+    h?: StyleProp<React.CSSProperties['height']>;
+    mih?: StyleProp<React.CSSProperties['minHeight']>;
+    mah?: StyleProp<React.CSSProperties['maxHeight']>;
+    bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;
+    bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;
+    bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;
+    bga?: StyleProp<React.CSSProperties['backgroundAttachment']>;
+    pos?: StyleProp<React.CSSProperties['position']>;
+    top?: StyleProp<React.CSSProperties['top']>;
+    left?: StyleProp<React.CSSProperties['left']>;
+    bottom?: StyleProp<React.CSSProperties['bottom']>;
+    right?: StyleProp<React.CSSProperties['right']>;
+    inset?: StyleProp<React.CSSProperties['inset']>;
+    display?: StyleProp<React.CSSProperties['display']>;
+    flex?: StyleProp<React.CSSProperties['flex']>;
+}
+interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {
+}
 
-interface AlertType {
+interface AlertType extends Omit<Code0Component<HTMLDivElement>, "title"> {
     children?: ReactNode | ReactNode[];
     title: ReactNode;
     color?: Color;
@@ -16,32 +66,32 @@ interface AlertType {
 }
 declare const Alert: React.FC<AlertType>;
 
-interface BadgeType extends HTMLProps<HTMLSpanElement> {
+interface BadgeType extends Code0Component<HTMLSpanElement> {
     children: string;
     color?: Color;
 }
 declare const Badge: React.FC<BadgeType>;
 
-interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+interface ButtonType extends Code0Component<HTMLAnchorElement> {
     children: ReactNode | ReactNode[];
     color?: Color;
     variant?: "none" | "normal" | "outlined" | "filled";
     active?: boolean;
     disabled?: boolean;
 }
-interface ButtonIconType {
+interface ButtonIconType extends Code0Component<HTMLSpanElement> {
     children: ReactNode;
 }
 declare const _default$7: React.FC<ButtonType> & {
     Icon: React.FC<ButtonIconType>;
 };
 
-interface ButtonGroupType {
+interface ButtonGroupType extends Code0Component<HTMLDivElement> {
     children: ReactElement<ButtonType>[];
 }
 declare const ButtonGroup: React.FC<ButtonGroupType>;
 
-interface CardType extends HTMLProps<HTMLDivElement> {
+interface CardType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
     color?: Color;
     variant?: "none" | "normal" | "outlined" | "filled";
@@ -49,7 +99,7 @@ interface CardType extends HTMLProps<HTMLDivElement> {
     gradientPosition?: "top-left" | "top-right" | "bottom-right" | "bottom-left";
     outline?: boolean;
 }
-interface SectionType {
+interface SectionType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
     image?: boolean;
     border?: boolean;
@@ -59,7 +109,7 @@ declare const _default$6: React.FC<CardType> & {
 };
 
 type ColBreakPointRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-interface ColType extends HTMLProps<HTMLDivElement> {
+interface ColType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
     xs?: ColBreakPointRange;
     sm?: ColBreakPointRange;
@@ -70,7 +120,7 @@ interface ColType extends HTMLProps<HTMLDivElement> {
 }
 declare const Col: React.FC<ColType>;
 
-interface ContainerType extends HTMLProps<HTMLDivElement> {
+interface ContainerType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
 }
 declare const Container: React.FC<ContainerType>;
@@ -113,9 +163,9 @@ declare const _default$5: React.FC<DropdownType$1> & {
     };
 };
 
-interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
+interface FontType extends Omit<Omit<Code0Component<HTMLSpanElement>, "children">, "size"> {
     children: string;
-    size: Size;
+    size: Code0Sizes;
     hierarchy?: "primary" | "secondary" | "tertiary";
 }
 declare const Text: React.FC<FontType>;
@@ -223,7 +273,7 @@ interface QuoteType extends Omit<CardType, "children"> {
 }
 declare const Quote: React.FC<QuoteType>;
 
-interface RowType extends HTMLProps<HTMLDivElement> {
+interface RowType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[];
 }
 declare const Row: React.FC<RowType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "dev": "npm run storybook:dev",
@@ -70,6 +70,7 @@
     "access": "public"
   },
   "dependencies": {
+    "merge-props": "^6.0.0",
     "react-aria": "^3.31.1",
     "react-stately": "^3.29.1",
     "rollup-plugin-visualizer": "^5.11.0"