@code0-tech/pictor 0.6.1 → 0.6.3

package/dist/index.js

@@ -5,56 +5,56 @@ import { Badge as u } from "./components/badge/Badge.js";
 import { Breadcrumb as x } from "./components/breadcrumb/Breadcrumb.js";
 import { Button as f } from "./components/button/Button.js";
 import { ButtonGroup as g } from "./components/button-group/ButtonGroup.js";
-import { Card as b } from "./components/card/Card.js";
-import { Col as d } from "./components/col/Col.js";
-import { Command as T, CommandDialog as M, CommandEmpty as I, CommandGroup as D, CommandInput as A, CommandItem as v, CommandList as F, CommandSeparator as P, CommandShortcut as R } from "./components/command/Command.js";
-import { Container as w } from "./components/container/Container.js";
-import { ContextMenu as h, ContextMenuArrow as G, ContextMenuContent as z, ContextMenuGroup as B, ContextMenuItem as O, ContextMenuLabel as k, ContextMenuPortal as E, ContextMenuSeparator as H, ContextMenuSub as N, ContextMenuSubContent as V, ContextMenuSubTrigger as j, ContextMenuTrigger as Q } from "./components/context-menu/ContextMenu.js";
+import { Card as s } from "./components/card/Card.js";
+import { Col as b } from "./components/col/Col.js";
+import { Command as M, CommandDialog as I, CommandEmpty as c, CommandGroup as D, CommandInput as A, CommandItem as F, CommandList as P, CommandSeparator as v, CommandShortcut as h } from "./components/command/Command.js";
+import { Container as R } from "./components/container/Container.js";
+import { ContextMenu as y, ContextMenuArrow as G, ContextMenuContent as z, ContextMenuGroup as B, ContextMenuItem as V, ContextMenuLabel as k, ContextMenuPortal as E, ContextMenuSeparator as H, ContextMenuSub as O, ContextMenuSubContent as Q, ContextMenuSubTrigger as N, ContextMenuTrigger as Z } from "./components/context-menu/ContextMenu.js";
 import { DataTable as q } from "./components/data-table/DataTable.js";
 import { DataTableColumn as K } from "./components/data-table/DataTableColumn.js";
 import { DataTableFilterInput as W, createFilterQueryLanguage as X } from "./components/data-table/DataTableFilterInput.js";
 import { DataTableFilterSuggestionMenu as _ } from "./components/data-table/DataTableFilterSuggestionMenu.js";
-import { Dialog as ee, DialogClose as oe, DialogContent as re, DialogDescription as te, DialogFooter as ne, DialogHeader as ae, DialogOverlay as pe, DialogPortal as me, DialogTitle as ue, DialogTrigger as ie } from "./components/dialog/Dialog.js";
-import { Editor as le } from "./components/editor/Editor.js";
-import { FileTabsService as Ce } from "./components/file-tabs/FileTabs.service.js";
-import { FileTabs as Se, FileTabsContent as be, FileTabsList as ce, FileTabsTrigger as de } from "./components/file-tabs/FileTabs.js";
-import { Flex as Te } from "./components/flex/Flex.js";
-import { CheckboxInput as Ie } from "./components/form/CheckboxInput.js";
-import { EmailInput as Ae, emailValidation as ve } from "./components/form/EmailInput.js";
-import { Input as Pe } from "./components/form/Input.js";
-import { InputDescription as ye } from "./components/form/InputDescription.js";
-import { InputLabel as Le } from "./components/form/InputLabel.js";
-import { InputMessage as Ge } from "./components/form/InputMessage.js";
-import { InputSuggestionMenuContent as Be, InputSuggestionMenuContentItems as Oe } from "./components/form/InputSuggestion.js";
-import { NumberInput as Ee } from "./components/form/NumberInput.js";
-import { PasswordInput as Ne, passwordValidation as Ve } from "./components/form/PasswordInput.js";
-import { PinInput as Qe, PinInputField as Ze, PinInputHiddenField as qe } from "./components/form/PinInput.js";
-import { RadioGroup as Ke } from "./components/form/RadioGroup.js";
-import { RadioInput as We } from "./components/form/RadioInput.js";
-import { SwitchInput as Ye } from "./components/form/SwitchInput.js";
-import { TextAreaInput as $e } from "./components/form/TextAreaInput.js";
-import { TextInput as oo } from "./components/form/TextInput.js";
-import { useForm as to } from "./components/form/useForm.js";
-import { buildDefaultSyntax as ao } from "./components/form/Input.syntax.hook.js";
-import { FullScreen as mo } from "./components/fullscreen/FullScreen.js";
-import { Layout as io } from "./components/layout/Layout.js";
-import { Menu as lo, MenuArrow as fo, MenuCheckboxItem as Co, MenuContent as go, MenuGroup as So, MenuItem as bo, MenuItemIndicator as co, MenuLabel as so, MenuPortal as To, MenuSeparator as Mo, MenuSub as Io, MenuSubContent as Do, MenuSubTrigger as Ao, MenuTrigger as vo } from "./components/menu/Menu.js";
-import { Quote as Po } from "./components/quote/Quote.js";
-import { ResizableHandle as yo, ResizablePanel as wo, ResizablePanelGroup as Lo } from "./components/resizable/Resizable.js";
-import { Row as Go } from "./components/row/Row.js";
-import { ScrollArea as Bo, ScrollAreaCorner as Oo, ScrollAreaScrollbar as ko, ScrollAreaThumb as Eo, ScrollAreaViewport as Ho } from "./components/scroll-area/ScrollArea.js";
-import { SegmentedControl as Vo, SegmentedControlItem as jo } from "./components/segmented-control/SegmentedControl.js";
-import { Spacing as Zo } from "./components/spacing/Spacing.js";
-import { Tab as Jo, TabContent as Ko, TabList as Uo, TabTrigger as Wo } from "./components/tab/Tab.js";
-import { Text as Yo } from "./components/text/Text.js";
-import { Toast as $o, toast as er } from "./components/toast/Toast.js";
-import { Tooltip as rr, TooltipArrow as tr, TooltipContent as nr, TooltipPortal as ar, TooltipTrigger as pr } from "./components/tooltip/Tooltip.js";
-import { ContextStore as ur, ContextStoreProvider as ir, useService as xr, useStore as lr } from "./utils/contextStore.js";
-import { NonReactiveArrayService as Cr, createNonReactiveArrayService as gr } from "./utils/nonReactiveArrayService.js";
-import { ObjectService as br, createObjectService as cr } from "./utils/objectStore.js";
+import { Dialog as oo, DialogClose as eo, DialogContent as ro, DialogDescription as to, DialogFooter as no, DialogHeader as ao, DialogOverlay as po, DialogPortal as mo, DialogTitle as uo, DialogTrigger as io } from "./components/dialog/Dialog.js";
+import { Editor as lo } from "./components/editor/Editor.js";
+import { FileTabsService as Co } from "./components/file-tabs/FileTabs.service.js";
+import { FileTabs as So, FileTabsContent as so, FileTabsList as To, FileTabsTrigger as bo } from "./components/file-tabs/FileTabs.js";
+import { Flex as Io } from "./components/flex/Flex.js";
+import { CheckboxInput as Do } from "./components/form/CheckboxInput.js";
+import { EmailInput as Fo, emailValidation as Po } from "./components/form/EmailInput.js";
+import { Input as ho } from "./components/form/Input.js";
+import { InputDescription as Ro } from "./components/form/InputDescription.js";
+import { InputLabel as yo } from "./components/form/InputLabel.js";
+import { InputMessage as zo } from "./components/form/InputMessage.js";
+import { InputSuggestionMenuContent as Vo, InputSuggestionMenuContentItems as ko } from "./components/form/InputSuggestion.js";
+import { NumberInput as Ho } from "./components/form/NumberInput.js";
+import { PasswordInput as Qo, passwordValidation as No } from "./components/form/PasswordInput.js";
+import { PinInput as jo, PinInputField as qo, PinInputHiddenField as Jo } from "./components/form/PinInput.js";
+import { RadioGroup as Uo } from "./components/form/RadioGroup.js";
+import { RadioInput as Xo } from "./components/form/RadioInput.js";
+import { SwitchInput as _o } from "./components/form/SwitchInput.js";
+import { TextAreaInput as oe } from "./components/form/TextAreaInput.js";
+import { TextInput as re } from "./components/form/TextInput.js";
+import { useForm as ne } from "./components/form/useForm.js";
+import { buildDefaultSyntax as pe } from "./components/form/Input.syntax.hook.js";
+import { FullScreen as ue } from "./components/fullscreen/FullScreen.js";
+import { Gantt as xe, getRelativeValue as le } from "./components/gantt/Gantt.js";
+import { Layout as Ce } from "./components/layout/Layout.js";
+import { Menu as Se, MenuArrow as se, MenuCheckboxItem as Te, MenuContent as be, MenuGroup as de, MenuItem as Me, MenuItemIndicator as Ie, MenuLabel as ce, MenuPortal as De, MenuSeparator as Ae, MenuSub as Fe, MenuSubContent as Pe, MenuSubTrigger as ve, MenuTrigger as he } from "./components/menu/Menu.js";
+import { Quote as Re } from "./components/quote/Quote.js";
+import { ResizableHandle as ye, ResizablePanel as Ge, ResizablePanelGroup as ze } from "./components/resizable/Resizable.js";
+import { Row as Ve } from "./components/row/Row.js";
+import { ScrollArea as Ee, ScrollAreaCorner as He, ScrollAreaScrollbar as Oe, ScrollAreaThumb as Qe, ScrollAreaViewport as Ne } from "./components/scroll-area/ScrollArea.js";
+import { SegmentedControl as je, SegmentedControlItem as qe } from "./components/segmented-control/SegmentedControl.js";
+import { Spacing as Ke } from "./components/spacing/Spacing.js";
+import { Tab as We, TabContent as Xe, TabList as Ye, TabTrigger as _e } from "./components/tab/Tab.js";
+import { Text as or } from "./components/text/Text.js";
+import { Toast as rr, toast as tr } from "./components/toast/Toast.js";
+import { Tooltip as ar, TooltipArrow as pr, TooltipContent as mr, TooltipPortal as ur, TooltipTrigger as ir } from "./components/tooltip/Tooltip.js";
+import { ContextStore as lr, ContextStoreProvider as fr, useService as Cr, useStore as gr } from "./utils/contextStore.js";
 import { ReactiveArrayService as sr, useReactiveArrayService as Tr } from "./utils/reactiveArrayService.js";
-import { Colors as Ir } from "./utils/types.js";
-import { getDOMSizeFromCodeZeroSize as Ar, hashToColor as vr, mergeCode0Props as Fr } from "./utils/utils.js";
+import { mergeComponentProps as dr } from "./utils/component.js";
+import { Colors as Ir, hashToColor as cr, withAlpha as Dr } from "./utils/color.js";
+import { getDOMSizeFromCodeZeroSize as Fr } from "./utils/size.js";
 export {
   r as Alert,
   n as AuroraBackground,
@@ -63,127 +63,126 @@ export {
   x as Breadcrumb,
   f as Button,
   g as ButtonGroup,
-  b as Card,
-  Ie as CheckboxInput,
-  d as Col,
+  s as Card,
+  Do as CheckboxInput,
+  b as Col,
   Ir as Colors,
-  T as Command,
-  M as CommandDialog,
-  I as CommandEmpty,
+  M as Command,
+  I as CommandDialog,
+  c as CommandEmpty,
   D as CommandGroup,
   A as CommandInput,
-  v as CommandItem,
-  F as CommandList,
-  P as CommandSeparator,
-  R as CommandShortcut,
-  w as Container,
-  h as ContextMenu,
+  F as CommandItem,
+  P as CommandList,
+  v as CommandSeparator,
+  h as CommandShortcut,
+  R as Container,
+  y as ContextMenu,
   G as ContextMenuArrow,
   z as ContextMenuContent,
   B as ContextMenuGroup,
-  O as ContextMenuItem,
+  V as ContextMenuItem,
   k as ContextMenuLabel,
   E as ContextMenuPortal,
   H as ContextMenuSeparator,
-  N as ContextMenuSub,
-  V as ContextMenuSubContent,
-  j as ContextMenuSubTrigger,
-  Q as ContextMenuTrigger,
-  ur as ContextStore,
-  ir as ContextStoreProvider,
+  O as ContextMenuSub,
+  Q as ContextMenuSubContent,
+  N as ContextMenuSubTrigger,
+  Z as ContextMenuTrigger,
+  lr as ContextStore,
+  fr as ContextStoreProvider,
   q as DataTable,
   K as DataTableColumn,
   W as DataTableFilterInput,
   _ as DataTableFilterSuggestionMenu,
-  ee as Dialog,
-  oe as DialogClose,
-  re as DialogContent,
-  te as DialogDescription,
-  ne as DialogFooter,
-  ae as DialogHeader,
-  pe as DialogOverlay,
-  me as DialogPortal,
-  ue as DialogTitle,
-  ie as DialogTrigger,
-  le as Editor,
-  Ae as EmailInput,
-  Se as FileTabs,
-  be as FileTabsContent,
-  ce as FileTabsList,
-  Ce as FileTabsService,
-  de as FileTabsTrigger,
-  Te as Flex,
-  mo as FullScreen,
-  Pe as Input,
-  ye as InputDescription,
-  Le as InputLabel,
-  Ge as InputMessage,
-  Be as InputSuggestionMenuContent,
-  Oe as InputSuggestionMenuContentItems,
-  io as Layout,
-  lo as Menu,
-  fo as MenuArrow,
-  Co as MenuCheckboxItem,
-  go as MenuContent,
-  So as MenuGroup,
-  bo as MenuItem,
-  co as MenuItemIndicator,
-  so as MenuLabel,
-  To as MenuPortal,
-  Mo as MenuSeparator,
-  Io as MenuSub,
-  Do as MenuSubContent,
-  Ao as MenuSubTrigger,
-  vo as MenuTrigger,
-  Cr as NonReactiveArrayService,
-  Ee as NumberInput,
-  br as ObjectService,
-  Ne as PasswordInput,
-  Qe as PinInput,
-  Ze as PinInputField,
-  qe as PinInputHiddenField,
-  Po as Quote,
-  Ke as RadioGroup,
-  We as RadioInput,
+  oo as Dialog,
+  eo as DialogClose,
+  ro as DialogContent,
+  to as DialogDescription,
+  no as DialogFooter,
+  ao as DialogHeader,
+  po as DialogOverlay,
+  mo as DialogPortal,
+  uo as DialogTitle,
+  io as DialogTrigger,
+  lo as Editor,
+  Fo as EmailInput,
+  So as FileTabs,
+  so as FileTabsContent,
+  To as FileTabsList,
+  Co as FileTabsService,
+  bo as FileTabsTrigger,
+  Io as Flex,
+  ue as FullScreen,
+  xe as Gantt,
+  ho as Input,
+  Ro as InputDescription,
+  yo as InputLabel,
+  zo as InputMessage,
+  Vo as InputSuggestionMenuContent,
+  ko as InputSuggestionMenuContentItems,
+  Ce as Layout,
+  Se as Menu,
+  se as MenuArrow,
+  Te as MenuCheckboxItem,
+  be as MenuContent,
+  de as MenuGroup,
+  Me as MenuItem,
+  Ie as MenuItemIndicator,
+  ce as MenuLabel,
+  De as MenuPortal,
+  Ae as MenuSeparator,
+  Fe as MenuSub,
+  Pe as MenuSubContent,
+  ve as MenuSubTrigger,
+  he as MenuTrigger,
+  Ho as NumberInput,
+  Qo as PasswordInput,
+  jo as PinInput,
+  qo as PinInputField,
+  Jo as PinInputHiddenField,
+  Re as Quote,
+  Uo as RadioGroup,
+  Xo as RadioInput,
   sr as ReactiveArrayService,
-  yo as ResizableHandle,
-  wo as ResizablePanel,
-  Lo as ResizablePanelGroup,
-  Go as Row,
-  Bo as ScrollArea,
-  Oo as ScrollAreaCorner,
-  ko as ScrollAreaScrollbar,
-  Eo as ScrollAreaThumb,
-  Ho as ScrollAreaViewport,
-  Vo as SegmentedControl,
-  jo as SegmentedControlItem,
-  Zo as Spacing,
-  Ye as SwitchInput,
-  Jo as Tab,
-  Ko as TabContent,
-  Uo as TabList,
-  Wo as TabTrigger,
-  Yo as Text,
-  $e as TextAreaInput,
-  oo as TextInput,
-  $o as Toast,
-  rr as Tooltip,
-  tr as TooltipArrow,
-  nr as TooltipContent,
-  ar as TooltipPortal,
-  pr as TooltipTrigger,
-  ao as buildDefaultSyntax,
+  ye as ResizableHandle,
+  Ge as ResizablePanel,
+  ze as ResizablePanelGroup,
+  Ve as Row,
+  Ee as ScrollArea,
+  He as ScrollAreaCorner,
+  Oe as ScrollAreaScrollbar,
+  Qe as ScrollAreaThumb,
+  Ne as ScrollAreaViewport,
+  je as SegmentedControl,
+  qe as SegmentedControlItem,
+  Ke as Spacing,
+  _o as SwitchInput,
+  We as Tab,
+  Xe as TabContent,
+  Ye as TabList,
+  _e as TabTrigger,
+  or as Text,
+  oe as TextAreaInput,
+  re as TextInput,
+  rr as Toast,
+  ar as Tooltip,
+  pr as TooltipArrow,
+  mr as TooltipContent,
+  ur as TooltipPortal,
+  ir as TooltipTrigger,
+  pe as buildDefaultSyntax,
   X as createFilterQueryLanguage,
-  gr as createNonReactiveArrayService,
-  cr as createObjectService,
-  ve as emailValidation,
-  Ar as getDOMSizeFromCodeZeroSize,
-  vr as hashToColor,
-  Fr as mergeCode0Props,
-  Ve as passwordValidation,
-  er as toast,
-  to as useForm,
+  Po as emailValidation,
+  Fr as getDOMSizeFromCodeZeroSize,
+  le as getRelativeValue,
+  cr as hashToColor,
+  dr as mergeComponentProps,
+  No as passwordValidation,
+  tr as toast,
+  ne as useForm,
   Tr as useReactiveArrayService,
-  xr as useService,
-  lr as useStore
+  Cr as useService,
+  gr as useStore,
+  Dr as withAlpha
 };

package/dist/utils/color.d.ts

@@ -0,0 +1,4 @@
+export type Color = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
+export declare const Colors: Color[];
+export declare const hashToColor: (s: string, from?: number, to?: number) => string;
+export declare const withAlpha: (color: string, alpha: number) => string;

package/dist/utils/color.js

@@ -0,0 +1,43 @@
+import { md5 as s } from "js-md5";
+const i = ["primary", "secondary", "info", "success", "warning", "error"], u = 137.50776405003785, d = (r) => {
+  const t = r.match(/\/(\d+)\s*$/);
+  return t ? Number(t[1]) : null;
+}, p = (r, t = 25, n = 320) => {
+  const o = n - t, e = d(r);
+  if (e != null)
+    return `hsl(${t + e * u % o}, 100%, 72%)`;
+  const c = s(s(r)), a = parseInt(c.slice(0, 8), 16);
+  return `hsl(${t + a % o}, 100%, 72%)`;
+}, m = (r) => {
+  if (typeof document > "u")
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 1
+    };
+  const t = document.createElement("span");
+  t.style.color = r, document.body.appendChild(t);
+  const n = getComputedStyle(t).color;
+  document.body.removeChild(t);
+  const o = n.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/);
+  return o ? {
+    r: Math.round(Number(o[1])),
+    g: Math.round(Number(o[2])),
+    b: Math.round(Number(o[3])),
+    a: o[4] !== void 0 ? Number(o[4]) : 1
+  } : {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1
+  };
+}, l = (r) => Math.min(Math.max(r, 0), 1), g = (r, t) => {
+  const n = m(r);
+  return `rgba(${n.r}, ${n.g}, ${n.b}, ${l(t)})`;
+};
+export {
+  i as Colors,
+  p as hashToColor,
+  g as withAlpha
+};

package/dist/utils/component.d.ts

@@ -0,0 +1,105 @@
+import { default as React, HTMLProps } from 'react';
+import { FontSizes } from './size';
+type StyleProp<Value> = Value;
+export interface ComponentProps {
+    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<FontSizes | 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']>;
+    align?: StyleProp<React.CSSProperties['alignItems']>;
+    justify?: StyleProp<React.CSSProperties['justifyContent']>;
+    tf?: StyleProp<React.CSSProperties['transform']>;
+}
+export type Component<T> = ComponentProps & HTMLProps<T>;
+export declare const mergeComponentProps: (cn: string, rest: object) => {
+    m?: StyleProp<number | `${number}`> | undefined;
+    my?: StyleProp<number | `${number}`> | undefined;
+    mx?: StyleProp<number | `${number}`> | undefined;
+    mt?: StyleProp<number | `${number}`> | undefined;
+    mb?: StyleProp<number | `${number}`> | undefined;
+    ml?: StyleProp<number | `${number}`> | undefined;
+    mr?: StyleProp<number | `${number}`> | undefined;
+    p?: StyleProp<number | `${number}`> | undefined;
+    py?: StyleProp<number | `${number}`> | undefined;
+    px?: StyleProp<number | `${number}`> | undefined;
+    pt?: StyleProp<number | `${number}`> | undefined;
+    pb?: StyleProp<number | `${number}`> | undefined;
+    pl?: StyleProp<number | `${number}`> | undefined;
+    pr?: StyleProp<number | `${number}`> | undefined;
+    bg?: import("csstype").Property.BackgroundColor | undefined;
+    c?: import("csstype").Property.Color | undefined;
+    opacity?: import("csstype").Property.Opacity | undefined;
+    ff?: StyleProp<"mono" | "text" | "heading" | (string & {})> | undefined;
+    fz?: StyleProp<FontSizes | number | `${number}`> | undefined;
+    fw?: import("csstype").Property.FontWeight | undefined;
+    lts?: import("csstype").Property.LetterSpacing<string | number> | undefined;
+    ta?: import("csstype").Property.TextAlign | undefined;
+    lh?: StyleProp<number | (string & {})> | undefined;
+    fs?: import("csstype").Property.FontStyle | undefined;
+    tt?: import("csstype").Property.TextTransform | undefined;
+    td?: import("csstype").Property.TextDecoration<string | number> | undefined;
+    w?: import("csstype").Property.Width<string | number> | undefined;
+    miw?: import("csstype").Property.MinWidth<string | number> | undefined;
+    maw?: import("csstype").Property.MaxWidth<string | number> | undefined;
+    h?: import("csstype").Property.Height<string | number> | undefined;
+    mih?: import("csstype").Property.MinHeight<string | number> | undefined;
+    mah?: import("csstype").Property.MaxHeight<string | number> | undefined;
+    bgsz?: import("csstype").Property.BackgroundSize<string | number> | undefined;
+    bgp?: import("csstype").Property.BackgroundPosition<string | number> | undefined;
+    bgr?: import("csstype").Property.BackgroundRepeat | undefined;
+    bga?: import("csstype").Property.BackgroundAttachment | undefined;
+    pos?: import("csstype").Property.Position | undefined;
+    top?: import("csstype").Property.Top<string | number> | undefined;
+    left?: import("csstype").Property.Left<string | number> | undefined;
+    bottom?: import("csstype").Property.Bottom<string | number> | undefined;
+    right?: import("csstype").Property.Right<string | number> | undefined;
+    inset?: import("csstype").Property.Inset<string | number> | undefined;
+    display?: import("csstype").Property.Display | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
+    align?: import("csstype").Property.AlignItems | undefined;
+    justify?: import("csstype").Property.JustifyContent | undefined;
+    tf?: import("csstype").Property.Transform | undefined;
+    style?: React.CSSProperties | undefined;
+    className: string;
+};
+export {};

package/dist/utils/component.js

@@ -0,0 +1,130 @@
+import a from "merge-props";
+const g = (m) => ({
+  ...m.m ? {
+    margin: `${m.m}rem`
+  } : {},
+  ...m.my ? {
+    marginTop: `${m.my}rem`,
+    marginBottom: `${m.my}rem`
+  } : {},
+  ...m.mx ? {
+    marginLeft: `${m.mx}rem`,
+    marginRight: `${m.mx}rem`
+  } : {},
+  ...m.mt ? {
+    marginTop: `${m.mt}rem`
+  } : {},
+  ...m.mb ? {
+    marginBottom: `${m.mb}rem`
+  } : {},
+  ...m.ml ? {
+    marginLeft: `${m.ml}rem`
+  } : {},
+  ...m.mr ? {
+    marginRight: `${m.mr}rem`
+  } : {},
+  ...m.p ? {
+    padding: `${m.p}rem`
+  } : {},
+  ...m.py ? {
+    paddingTop: `${m.py}rem`,
+    paddingBottom: `${m.py}rem`
+  } : {},
+  ...m.px ? {
+    paddingLeft: `${m.px}rem`,
+    paddingRight: `${m.px}rem`
+  } : {},
+  ...m.pt ? {
+    paddingTop: `${m.pt}rem`
+  } : {},
+  ...m.pb ? {
+    paddingBottom: `${m.pb}rem`
+  } : {},
+  ...m.pl ? {
+    paddingLeft: `${m.pl}rem`
+  } : {},
+  ...m.pr ? {
+    paddingRight: `${m.pr}rem`
+  } : {},
+  ...m.bg ? {
+    backgroundColor: m.bg
+  } : {},
+  ...m.c ? {
+    color: m.c
+  } : {},
+  ...m.opacity ? {
+    opacity: m.opacity
+  } : {},
+  ...m.ff ? {
+    fontFamily: m.ff
+  } : {},
+  ...m.fz ? {
+    fontSize: `${m.fz}rem`
+  } : {},
+  ...m.ta ? {
+    textAlign: m.ta
+  } : {},
+  ...m.w ? {
+    width: m.w
+  } : {},
+  ...m.miw ? {
+    minWidth: m.miw
+  } : {},
+  ...m.maw ? {
+    maxWidth: m.maw
+  } : {},
+  ...m.h ? {
+    height: m.h
+  } : {},
+  ...m.mih ? {
+    minHeight: m.mih
+  } : {},
+  ...m.mah ? {
+    maxHeight: m.mah
+  } : {},
+  ...m.pos ? {
+    position: m.pos
+  } : {},
+  ...m.top ? {
+    top: m.top
+  } : {},
+  ...m.left ? {
+    left: m.left
+  } : {},
+  ...m.bottom ? {
+    bottom: m.bottom
+  } : {},
+  ...m.right ? {
+    right: m.right
+  } : {},
+  ...m.display ? {
+    display: m.display
+  } : {},
+  ...m.flex ? {
+    flex: m.flex
+  } : {},
+  ...m.align ? {
+    alignItems: m.align
+  } : {},
+  ...m.justify ? {
+    justifyContent: m.justify
+  } : {},
+  ...m.tf ? {
+    transform: m.tf
+  } : {}
+}), d = (m, i) => {
+  const p = g(i), o = {
+    ...i
+  };
+  return ["m", "my", "mx", "mt", "mb", "ml", "mr", "p", "py", "px", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "w", "miw", "maw", "h", "mih", "mah", "bgsz", "bgp", "bgr", "bga", "pos", "top", "left", "bottom", "right", "inset", "display", "flex", "align", "justify", "tf"].forEach((r) => {
+    delete o[r];
+  }), a(o, {
+    className: m,
+    ...Object.keys(p).length !== 0 ? {
+      style: p
+    } : {}
+  });
+};
+export {
+  d as mergeComponentProps
+};

package/dist/utils/index.d.ts

@@ -1,7 +1,6 @@
 export * from './arrayService';
 export * from './contextStore';
-export * from './nonReactiveArrayService';
-export * from './objectStore';
 export * from './reactiveArrayService';
-export * from './types';
-export * from './utils';
+export * from './component';
+export * from './color';
+export * from './size';