@code0-tech/pictor 0.6.0 → 0.6.2

package/dist/utils/index.js

@@ -1,22 +1,18 @@
-import { ContextStore as o, ContextStoreProvider as t, useService as c, useStore as i } from "./contextStore.js";
-import { NonReactiveArrayService as S, createNonReactiveArrayService as a } from "./nonReactiveArrayService.js";
-import { ObjectService as x, createObjectService as p } from "./objectStore.js";
-import { ReactiveArrayService as s, useReactiveArrayService as C } from "./reactiveArrayService.js";
-import { Colors as y } from "./types.js";
-import { getDOMSizeFromCodeZeroSize as R, hashToColor as d, mergeCode0Props as u } from "./utils.js";
+import { ContextStore as o, ContextStoreProvider as t, useService as i, useStore as m } from "./contextStore.js";
+import { ReactiveArrayService as S, useReactiveArrayService as x } from "./reactiveArrayService.js";
+import { mergeComponentProps as s } from "./component.js";
+import { Colors as C, hashToColor as c, withAlpha as f } from "./color.js";
+import { getDOMSizeFromCodeZeroSize as n } from "./size.js";
 export {
-  y as Colors,
+  C as Colors,
   o as ContextStore,
   t as ContextStoreProvider,
-  S as NonReactiveArrayService,
-  x as ObjectService,
-  s as ReactiveArrayService,
-  a as createNonReactiveArrayService,
-  p as createObjectService,
-  R as getDOMSizeFromCodeZeroSize,
-  d as hashToColor,
-  u as mergeCode0Props,
-  C as useReactiveArrayService,
-  c as useService,
-  i as useStore
+  S as ReactiveArrayService,
+  n as getDOMSizeFromCodeZeroSize,
+  c as hashToColor,
+  s as mergeComponentProps,
+  x as useReactiveArrayService,
+  i as useService,
+  m as useStore,
+  f as withAlpha
 };

package/dist/utils/size.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+export type Sizes = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+export type FontSizes = "0.35" | "0.7" | "0.8" | "1" | "1.2" | "1.3";
+export declare const getDOMSizeFromCodeZeroSize: (size: Sizes | CSSProperties["x"]) => CSSProperties["x"];

package/dist/utils/size.js

@@ -0,0 +1,21 @@
+const r = (e) => {
+  switch (e) {
+    case "xxs":
+      return "0.35rem";
+    case "xs":
+      return "0.7rem";
+    case "sm":
+      return "0.8rem";
+    case "md":
+      return "1rem";
+    case "lg":
+      return "1.2rem";
+    case "xl":
+      return "1.3rem";
+    default:
+      return e;
+  }
+};
+export {
+  r as getDOMSizeFromCodeZeroSize
+};

package/dist/utils/utils.d.ts

@@ -1,55 +0,0 @@
-import { CSSProperties } from 'react';
-import { Code0Sizes } from './types';
-export declare const mergeCode0Props: (cn: string, rest: object) => {
-    m?: import('./types').StyleProp<number | `${number}`> | undefined;
-    my?: import('./types').StyleProp<number | `${number}`> | undefined;
-    mx?: import('./types').StyleProp<number | `${number}`> | undefined;
-    mt?: import('./types').StyleProp<number | `${number}`> | undefined;
-    mb?: import('./types').StyleProp<number | `${number}`> | undefined;
-    ml?: import('./types').StyleProp<number | `${number}`> | undefined;
-    mr?: import('./types').StyleProp<number | `${number}`> | undefined;
-    p?: import('./types').StyleProp<number | `${number}`> | undefined;
-    py?: import('./types').StyleProp<number | `${number}`> | undefined;
-    px?: import('./types').StyleProp<number | `${number}`> | undefined;
-    pt?: import('./types').StyleProp<number | `${number}`> | undefined;
-    pb?: import('./types').StyleProp<number | `${number}`> | undefined;
-    pl?: import('./types').StyleProp<number | `${number}`> | undefined;
-    pr?: import('./types').StyleProp<number | `${number}`> | undefined;
-    bg?: import("csstype").Property.BackgroundColor | undefined;
-    c?: import("csstype").Property.Color | undefined;
-    opacity?: import("csstype").Property.Opacity | undefined;
-    ff?: import('./types').StyleProp<"mono" | "text" | "heading" | (string & {})> | undefined;
-    fz?: import('./types').StyleProp<import('./types').Code0FontSizes | number | `${number}`> | undefined;
-    fw?: import("csstype").Property.FontWeight | undefined;
-    lts?: import("csstype").Property.LetterSpacing<string | number> | undefined;
-    ta?: import("csstype").Property.TextAlign | undefined;
-    lh?: import('./types').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?: CSSProperties | undefined;
-    className: string;
-};
-export declare const getDOMSizeFromCodeZeroSize: (size: Code0Sizes | CSSProperties["x"]) => CSSProperties["x"];
-export declare const hashToColor: (s: string, from?: number, to?: number) => string;

package/dist/utils/utils.js

@@ -1,159 +1 @@
-import t from "merge-props";
-import { md5 as p } from "js-md5";
-const c = (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
-  } : {}
-}), b = (m, r) => {
-  const i = c(r), o = {
-    ...r
-  };
-  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((a) => {
-    delete o[a];
-  }), t(o, {
-    className: m,
-    ...Object.keys(i).length !== 0 ? {
-      style: i
-    } : {}
-  });
-}, x = (m) => {
-  switch (m) {
-    case "xxs":
-      return "0.35rem";
-    case "xs":
-      return "0.7rem";
-    case "sm":
-      return "0.8rem";
-    case "md":
-      return "1rem";
-    case "lg":
-      return "1.2rem";
-    case "xl":
-      return "1.3rem";
-    default:
-      return m;
-  }
-}, f = 137.50776405003785, h = (m) => {
-  const r = m.match(/\/(\d+)\s*$/);
-  return r ? Number(r[1]) : null;
-}, e = (m, r = 25, i = 320) => {
-  const o = i - r, n = h(m);
-  if (n != null)
-    return `hsl(${r + n * f % o}, 100%, 72%)`;
-  const a = p(p(m)), g = parseInt(a.slice(0, 8), 16);
-  return `hsl(${r + g % o}, 100%, 72%)`;
-};
-export {
-  x as getDOMSizeFromCodeZeroSize,
-  e as hashToColor,
-  b as mergeCode0Props
-};
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {
@@ -51,7 +51,7 @@
     "@storybook/builder-vite": "^10.3.3",
     "@storybook/cli": "^10.3.3",
     "@storybook/react-vite": "^10.3.3",
-    "@tabler/icons-react": "3.40.0",
+    "@tabler/icons-react": "3.41.1",
     "@types/jest-image-snapshot": "^6.4.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -120,7 +120,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tabler/icons-react": "3.40.0",
+    "@tabler/icons-react": "3.41.1",
     "@uiw/codemirror-themes": "^4.25.4",
     "@uiw/react-codemirror": "^4.25.4",
     "@xyflow/react": "^12.10.0",

package/dist/utils/nonReactiveArrayService.d.ts

@@ -1,19 +0,0 @@
-import { ArrayService } from './arrayService';
-/**
- * using a React ref as a store in combination with a map
- * to be able to access and modify the store easily
- */
-export type NonReactiveArrayStore<K> = K[];
-export declare class NonReactiveArrayService<T> implements ArrayService<T, T> {
-    protected store: NonReactiveArrayStore<T>;
-    constructor(store: NonReactiveArrayStore<T>);
-    delete(index: number): void;
-    add(value: T): void;
-    set(index: number, value: T): void;
-    has(index: number): boolean;
-    get(index: number): T;
-    values(): NonReactiveArrayStore<T>;
-    update(): void;
-    clear(): void;
-}
-export declare const createNonReactiveArrayService: <K, T extends ArrayService<K>>(service: typeof T, callback?: (store: NonReactiveArrayStore<K>) => T) => [K[] | undefined, T];

package/dist/utils/nonReactiveArrayService.js

@@ -1,54 +0,0 @@
-function o(t, e, r) {
-  return (e = s(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
-}
-function s(t) {
-  var e = n(t, "string");
-  return typeof e == "symbol" ? e : e + "";
-}
-function n(t, e) {
-  if (typeof t != "object" || !t) return t;
-  var r = t[Symbol.toPrimitive];
-  if (r !== void 0) {
-    var i = r.call(t, e);
-    if (typeof i != "object") return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (e === "string" ? String : Number)(t);
-}
-class u {
-  constructor(e) {
-    o(this, "store", void 0), this.store = e;
-  }
-  delete(e) {
-    delete this.store[e];
-  }
-  add(e) {
-    this.store.push(e);
-  }
-  set(e, r) {
-    this.store[e] = r;
-  }
-  has(e) {
-    return !!this.store[e];
-  }
-  get(e) {
-    return this.store[e];
-  }
-  values() {
-    return this.store;
-  }
-  update() {
-    this.store = [...this.store];
-  }
-  clear() {
-    this.store = [];
-  }
-}
-const a = (t, e) => {
-  const r = [];
-  return [r, e ? e(r) : new t(r)];
-};
-export {
-  u as NonReactiveArrayService,
-  a as createNonReactiveArrayService
-};

package/dist/utils/objectStore.d.ts

@@ -1,12 +0,0 @@
-import { default as React } from 'react';
-/**
- * using a React ref as a store in combination with a map
- * to be able to access and modify the store easily
- */
-export type ObjectStore<K> = [K | undefined, React.Dispatch<React.SetStateAction<K>>];
-export declare class ObjectService<K> {
-    protected readonly store: ObjectStore<K>;
-    constructor(store: ObjectStore<K>);
-    object(): K | undefined;
-}
-export declare const createObjectService: <K, T extends ObjectService<K>>(service: typeof T, callback?: (store: ObjectStore<K>) => T, initial?: K) => [K | undefined, T];

package/dist/utils/objectStore.js

@@ -1,34 +0,0 @@
-import o from "react";
-function n(e, r, t) {
-  return (r = u(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e;
-}
-function u(e) {
-  var r = c(e, "string");
-  return typeof r == "symbol" ? r : r + "";
-}
-function c(e, r) {
-  if (typeof e != "object" || !e) return e;
-  var t = e[Symbol.toPrimitive];
-  if (t !== void 0) {
-    var i = t.call(e, r);
-    if (typeof i != "object") return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (r === "string" ? String : Number)(e);
-}
-class f {
-  constructor(r) {
-    n(this, "store", void 0), this.store = r;
-  }
-  object() {
-    return this.store[0];
-  }
-}
-const v = (e, r, t) => {
-  const i = o.useState(t);
-  return [i[0], r ? r(i) : new e(i)];
-};
-export {
-  f as ObjectService,
-  v as createObjectService
-};

package/dist/utils/types.d.ts

@@ -1,57 +0,0 @@
-import { default as React, HTMLProps } from 'react';
-export type Color = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
-export declare const Colors: Color[];
-export type Code0Sizes = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
-export type Code0FontSizes = "0.35" | "0.7" | "0.8" | "1" | "1.2" | "1.3";
-export type StyleProp<Value> = Value;
-export 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']>;
-    align?: StyleProp<React.CSSProperties['alignItems']>;
-    justify?: StyleProp<React.CSSProperties['justifyContent']>;
-    tf?: StyleProp<React.CSSProperties['transform']>;
-}
-export interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {
-}

package/dist/utils/types.js

@@ -1,4 +0,0 @@
-const r = ["primary", "secondary", "info", "success", "warning", "error"];
-export {
-  r as Colors
-};