@code0-tech/pictor 0.0.0-mvp.7 → 0.0.0-mvp.9

package/dist/assets/components/button/Button.style.css

@@ -1 +1 @@
-.button{padding:.35rem .7rem;gap:.5rem;cursor:pointer;height:fit-content;display:flex;align-items:center;width:fit-content;border-radius:50rem;justify-content:center;font-size:.8rem}.button:disabled,.button[data-disabled],.button[aria-disabled=true],.button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.button--primary{border:none;background:#030014;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--primary:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--primary:active,.button--primary:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--primary.button--outlined{background:transparent}.button--primary.button--none{background:transparent;box-shadow:none}.button--secondary{border:none;background:#1c1a2c;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--secondary:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--secondary:active,.button--secondary:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--secondary.button--outlined{background:transparent}.button--secondary.button--none{background:transparent;box-shadow:none}.button--success{border:none;background:#071314;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--success:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--success:active,.button--success:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--success.button--outlined{background:transparent}.button--success.button--none{background:transparent;box-shadow:none}.button--warning{border:none;background:#1c1313;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--warning:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--warning:active,.button--warning:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--warning.button--outlined{background:transparent}.button--warning.button--none{background:transparent;box-shadow:none}.button--error{border:none;background:#180016;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--error:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--error:active,.button--error:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--error.button--outlined{background:transparent}.button--error.button--none{background:transparent;box-shadow:none}.button--info{border:none;background:#0e1a24;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--info:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--info:active,.button--info:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--info.button--outlined{background:transparent}.button--info.button--none{background:transparent;box-shadow:none}
+.button{padding:.7rem 1rem;gap:.5rem;cursor:pointer;height:fit-content;display:flex;align-items:center;width:fit-content;justify-content:center;font-size:.8rem}.button:disabled,.button[data-disabled],.button[aria-disabled=true],.button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.button{border-radius:1rem}.button--primary{border:none;background:#030014;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--primary:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--primary:active,.button--primary:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--primary.button--outlined{background:transparent}.button--primary.button--none{background:transparent;box-shadow:none}.button--secondary{border:none;background:#1c1a2c;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--secondary:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--secondary:active,.button--secondary:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--secondary.button--outlined{background:transparent}.button--secondary.button--none{background:transparent;box-shadow:none}.button--success{border:none;background:#071314;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--success:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--success:active,.button--success:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--success.button--outlined{background:transparent}.button--success.button--none{background:transparent;box-shadow:none}.button--warning{border:none;background:#1c1313;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--warning:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--warning:active,.button--warning:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--warning.button--outlined{background:transparent}.button--warning.button--none{background:transparent;box-shadow:none}.button--error{border:none;background:#180016;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--error:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--error:active,.button--error:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--error.button--outlined{background:transparent}.button--error.button--none{background:transparent;box-shadow:none}.button--info{border:none;background:#0e1a24;color:#ffffffbf;position:relative;box-sizing:border-box;box-shadow:inset 0 0 0 1px #ffffff1a}.button--info:hover{box-shadow:inset 0 0 0 1px #ffffff40}.button--info:active,.button--info:focus{box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 3rem #ffffff1a;outline:none}.button--info.button--outlined{background:transparent}.button--info.button--none{background:transparent;box-shadow:none}

package/dist/assets/components/tab/Tab.style.css

@@ -0,0 +1 @@
+.tab[data-orientation=vertical],.tab__list{display:flex}.tab__list[data-orientation=vertical]{flex-direction:column}.tab__trigger{background:transparent;border:none;padding:0;margin:0;position:relative;box-sizing:border-box}.tab__trigger:after{content:"";position:absolute;background:transparent;border-radius:50rem}.tab__trigger[data-orientation=vertical]:after{height:100%;width:2px;top:0;left:0}.tab__trigger[data-orientation=horizontal]:after{width:100%;height:2px;bottom:0;left:0}.tab__trigger[aria-selected=true][data-orientation=vertical]:after,.tab__trigger[aria-selected=true][data-orientation=horizontal]:after{background:#70ffb2}

package/dist/assets/components/text/Text.style.css

@@ -1 +1 @@
-.text{font-family:Inter,sans-serif}.text--xs{font-size:.7rem}.text--sm{font-size:.8rem}.text--md{font-size:1rem}.text--lg{font-size:1.2rem}.text--xl{font-size:1.3rem}.text--primary{font-family:Inter,sans-serif;line-height:1.1;letter-spacing:-.75px;color:#fff}.text--secondary{line-height:1.1;letter-spacing:-.75px;color:#ffffffbf}.text--tertiary{line-height:1.1;letter-spacing:-.75px;color:#ffffff80}
+.text{font-family:Inter,sans-serif}.text--xxs{font-size:.35rem}.text--xs{font-size:.7rem}.text--sm{font-size:.8rem}.text--md{font-size:1rem}.text--lg{font-size:1.2rem}.text--xl{font-size:1.3rem}.text--primary{font-family:Inter,sans-serif;line-height:1.1;letter-spacing:-.75px;color:#fff}.text--secondary{line-height:1.1;letter-spacing:-.75px;color:#ffffffbf}.text--tertiary{line-height:1.1;letter-spacing:-.75px;color:#ffffff80}

package/dist/components/d-user/DUserMenu.js

@@ -1,28 +1,28 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import l from "react";
-import { Menu as u, MenuTrigger as d, MenuPortal as h, MenuContent as f } from "../menu/Menu.js";
-import { DUserReactiveService as n } from "./DUser.service.js";
-import { useService as s } from "../../utils/contextStore.js";
-import { Avatar as p } from "../avatar/Avatar.js";
-import { Text as o } from "../text/Text.js";
-import { Flex as c } from "../flex/Flex.js";
-const j = (i) => {
-  const m = s(n), a = s(n), r = m.getUserSession()?.user;
-  return l.useMemo(() => /* @__PURE__ */ t(u, { ...i, children: [
-    /* @__PURE__ */ e(d, { asChild: !0, children: /* @__PURE__ */ t(c, { align: "center", style: {
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import o from "react";
+import { Menu as l, MenuTrigger as u, MenuPortal as d, MenuContent as h } from "../menu/Menu.js";
+import { DUserReactiveService as s } from "./DUser.service.js";
+import { useService as f, useStore as x } from "../../utils/contextStore.js";
+import { Avatar as y } from "../avatar/Avatar.js";
+import { Text as c } from "../text/Text.js";
+import { Flex as m } from "../flex/Flex.js";
+const z = (t) => {
+  const n = f(s), a = x(s), r = o.useMemo(() => n.getById(t.userId), [a, n]);
+  return o.useMemo(() => /* @__PURE__ */ i(l, { ...t, children: [
+    /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ i(m, { align: "center", style: {
       gap: ".5rem"
     }, children: [
-      /* @__PURE__ */ e(p, { src: r?.avatarPath ?? "", identifier: r?.username ?? "" }),
-      /* @__PURE__ */ t(c, { style: {
+      /* @__PURE__ */ e(y, { src: r?.avatarPath ?? "", identifier: r?.username ?? "" }),
+      /* @__PURE__ */ i(m, { style: {
         flexDirection: "column"
       }, children: [
-        /* @__PURE__ */ e(o, { size: "md", hierarchy: "secondary", children: r?.username }),
-        /* @__PURE__ */ e(o, { size: "xs", hierarchy: "tertiary", children: r?.email })
+        /* @__PURE__ */ e(c, { size: "md", hierarchy: "secondary", children: r?.username }),
+        /* @__PURE__ */ e(c, { size: "xs", hierarchy: "tertiary", children: r?.email })
       ] })
     ] }) }),
-    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { side: "bottom", align: "start", sideOffset: 8, children: i.children }) })
-  ] }), [a]);
+    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(h, { side: "bottom", align: "start", sideOffset: 8, children: t.children }) })
+  ] }), [r]);
 };
 export {
-  j as default
+  z as default
 };

package/dist/components/spacing/Spacing.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Code0Component, Code0Sizes } from '../../utils';
+export interface SpacingProps extends Code0Component<HTMLDivElement> {
+    spacing: Code0Sizes;
+}
+export declare const Spacing: React.FC<SpacingProps>;

package/dist/components/spacing/Spacing.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c } from "../../_virtual/compiler-runtime.js";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeCode0Props as n } from "../../utils/utils.js";
+const x = (o) => {
+  const t = c.c(4);
+  let e;
+  if (t[0] !== o) {
+    const {
+      spacing: r,
+      ...m
+    } = o;
+    e = n(`spacing spacing--${r}`, m), t[0] = o, t[1] = e;
+  } else
+    e = t[1];
+  let i;
+  return t[2] !== e ? (i = /* @__PURE__ */ s("div", { ...e }), t[2] = e, t[3] = i) : i = t[3], i;
+};
+export {
+  x as Spacing
+};

package/dist/components/tab/Tab.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Code0ComponentProps } from '../../utils';
+import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from '@radix-ui/react-tabs';
+export type TabProps = Code0ComponentProps & TabsProps;
+export type TabListProps = Code0ComponentProps & TabsListProps;
+export type TabTriggerProps = Code0ComponentProps & TabsTriggerProps;
+export type TabContentProps = Code0ComponentProps & TabsContentProps;
+export declare const Tab: React.FC<TabProps>;
+export declare const TabList: React.FC<TabListProps>;
+export declare const TabTrigger: React.FC<TabTriggerProps>;
+export declare const TabContent: React.FC<TabContentProps>;

package/dist/components/tab/Tab.js

@@ -0,0 +1,40 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as n } from "../../_virtual/compiler-runtime.js";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeCode0Props as r } from "../../utils/utils.js";
+import { Tabs as c, List as m, Trigger as b, Content as f } from "@radix-ui/react-tabs";
+import '../../assets/components/tab/Tab.style.css';/* empty css               */
+const x = (a) => {
+  const t = n.c(4);
+  let e;
+  t[0] !== a ? (e = r("tab", a), t[0] = a, t[1] = e) : e = t[1];
+  let l;
+  return t[2] !== e ? (l = /* @__PURE__ */ o(c, { "data-slot": "tabs", ...e }), t[2] = e, t[3] = l) : l = t[3], l;
+}, C = (a) => {
+  const t = n.c(4);
+  let e;
+  t[0] !== a ? (e = r("tab__list", a), t[0] = a, t[1] = e) : e = t[1];
+  let l;
+  return t[2] !== e ? (l = /* @__PURE__ */ o(m, { "data-slot": "tabs", ...e }), t[2] = e, t[3] = l) : l = t[3], l;
+}, L = (a) => {
+  const t = n.c(5), e = a.value;
+  let l;
+  t[0] !== a ? (l = r("tab__trigger", a), t[0] = a, t[1] = l) : l = t[1];
+  const s = l;
+  let i;
+  return t[2] !== a.value || t[3] !== s ? (i = /* @__PURE__ */ o(b, { "data-slot": "tabs", "data-value": e, ...s }), t[2] = a.value, t[3] = s, t[4] = i) : i = t[4], i;
+}, j = (a) => {
+  const t = n.c(4);
+  let e;
+  t[0] !== a ? (e = r("tab__content", a), t[0] = a, t[1] = e) : e = t[1];
+  const l = e;
+  let s;
+  return t[2] !== l ? (s = /* @__PURE__ */ o(f, { "data-slot": "tabs", ...l }), t[2] = l, t[3] = s) : s = t[3], s;
+};
+export {
+  x as Tab,
+  j as TabContent,
+  C as TabList,
+  L as TabTrigger
+};

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export * from './components/quote/Quote';
 export * from './components/row/Row';
 export * from './components/scroll-area/ScrollArea';
 export * from './components/segmented-control/SegmentedControl';
+export * from './components/spacing/Spacing';
 export * from './components/text/Text';
 export * from './components/tooltip/Tooltip';
 export * from './utils/index';

package/dist/index.js

@@ -73,12 +73,13 @@ import { Quote as yr } from "./components/quote/Quote.js";
 import { Row as Gr } from "./components/row/Row.js";
 import { ScrollArea as Or, ScrollAreaCorner as Er, ScrollAreaScrollbar as hr, ScrollAreaThumb as zr, ScrollAreaViewport as Br } from "./components/scroll-area/ScrollArea.js";
 import { SegmentedControl as Hr, SegmentedControlItem as Ur } from "./components/segmented-control/SegmentedControl.js";
-import { Tooltip as _r, TooltipArrow as kr, TooltipContent as Kr, TooltipPortal as Qr, TooltipTrigger as qr } from "./components/tooltip/Tooltip.js";
-import { InspectionSeverity as Xr } from "./utils/inspection.js";
-import { NonReactiveArrayService as Zr, createNonReactiveArrayService as $r } from "./utils/nonReactiveArrayService.js";
-import { ObjectService as ot, createObjectService as rt } from "./utils/objectStore.js";
-import { ReactiveArrayService as it, useReactiveArrayService as pt } from "./utils/reactiveArrayService.js";
-import { Colors as at } from "./utils/types.js";
+import { Spacing as _r } from "./components/spacing/Spacing.js";
+import { Tooltip as Kr, TooltipArrow as Qr, TooltipContent as qr, TooltipPortal as Jr, TooltipTrigger as Xr } from "./components/tooltip/Tooltip.js";
+import { InspectionSeverity as Zr } from "./utils/inspection.js";
+import { NonReactiveArrayService as et, createNonReactiveArrayService as ot } from "./utils/nonReactiveArrayService.js";
+import { ObjectService as tt, createObjectService as it } from "./utils/objectStore.js";
+import { ReactiveArrayService as mt, useReactiveArrayService as at } from "./utils/reactiveArrayService.js";
+import { Colors as lt } from "./utils/types.js";
 export {
   m as Avatar,
   n as Badge,
@@ -88,7 +89,7 @@ export {
   g as Card,
   Xo as CheckboxInput,
   w as Col,
-  at as Colors,
+  lt as Colors,
   d as Command,
   F as CommandDialog,
   C as CommandEmpty,
@@ -160,7 +161,7 @@ export {
   nr as InputMessage,
   xr as InputSuggestionMenuContent,
   fr as InputSuggestionMenuContentItems,
-  Xr as InspectionSeverity,
+  Zr as InspectionSeverity,
   po as Menu,
   mo as MenuArrow,
   ao as MenuContent,
@@ -175,9 +176,9 @@ export {
   go as MenuTrigger,
   L as NodeFunctionView,
   O as NodeParameterView,
-  Zr as NonReactiveArrayService,
+  et as NonReactiveArrayService,
   ur as NumberInput,
-  ot as ObjectService,
+  tt as ObjectService,
   pe as ParameterDefinitionView,
   sr as PasswordInput,
   Sr as PinInput,
@@ -186,7 +187,7 @@ export {
   yr as Quote,
   Fr as RadioGroup,
   Rr as RadioInput,
-  it as ReactiveArrayService,
+  mt as ReactiveArrayService,
   Gr as Row,
   Or as ScrollArea,
   Er as ScrollAreaCorner,
@@ -195,16 +196,17 @@ export {
   Br as ScrollAreaViewport,
   Hr as SegmentedControl,
   Ur as SegmentedControlItem,
+  _r as Spacing,
   Vr as SwitchInput,
   ze as Text,
   Tr as TextInput,
-  _r as Tooltip,
-  kr as TooltipArrow,
-  Kr as TooltipContent,
-  Qr as TooltipPortal,
-  qr as TooltipTrigger,
-  $r as createNonReactiveArrayService,
-  rt as createObjectService,
+  Kr as Tooltip,
+  Qr as TooltipArrow,
+  qr as TooltipContent,
+  Jr as TooltipPortal,
+  Xr as TooltipTrigger,
+  ot as createNonReactiveArrayService,
+  it as createObjectService,
   $o as emailValidation,
   Qe as getChild,
   qe as getContent,
@@ -218,7 +220,7 @@ export {
   j as useFlowEdges,
   U as useFlowNodes,
   br as useForm,
-  pt as useReactiveArrayService,
+  at as useReactiveArrayService,
   Ue as useService,
   We as useStore
 };

package/dist/utils/types.d.ts

@@ -1,8 +1,8 @@
 import { default as React, HTMLProps } from 'react';
 export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
 export declare const Colors: Color[];
-export type Code0Sizes = "xs" | "sm" | "md" | "lg" | "xl";
-export type Code0FontSizes = "0.75" | "0.8" | "1" | "1.2" | "1.25";
+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}`>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.0.0-mvp.7",
+  "version": "0.0.0-mvp.9",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {
@@ -37,13 +37,13 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-a11y": "^10.0.4",
-    "@storybook/addon-links": "^10.0.4",
-    "@storybook/addon-onboarding": "^10.0.4",
-    "@storybook/builder-vite": "^10.0.4",
-    "@storybook/cli": "^10.0.4",
-    "@storybook/react": "^10.0.4",
-    "@storybook/react-vite": "^10.0.4",
+    "@storybook/addon-a11y": "^10.0.6",
+    "@storybook/addon-links": "^10.0.6",
+    "@storybook/addon-onboarding": "^10.0.6",
+    "@storybook/builder-vite": "^10.0.6",
+    "@storybook/cli": "^10.0.6",
+    "@storybook/react": "^10.0.6",
+    "@storybook/react-vite": "^10.0.6",
     "@storybook/test-runner": "^0.24.1",
     "@storybook/testing-library": "^0.2.2",
     "@tabler/icons-react": "3.35.0",
@@ -71,12 +71,12 @@
     "rimraf": "^6.1.0",
     "sass": "^1.93.3",
     "sass-loader": "^16.0.6",
-    "storybook": "^10.0.4",
+    "storybook": "^10.0.6",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "vite": "^7.2.1",
+    "vite": "^7.2.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "@code0-tech/definition-reader": "^0.0.16"