@code0-tech/pictor 0.17.2 → 0.18.0

package/dist/assets/components/progress/Progress.style.css

@@ -1 +1 @@
-.progress{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;box-sizing:border-box;background:transparent;border-radius:1rem;width:100%;height:10px;position:relative;transform:translateZ(0)}.progress:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:var(--color);opacity:.1;content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.progress__dot{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;top:50%;transform:translate(50%) translateY(-50%);right:calc(100% - 1% * (var(--progress, 0)))}.progress__indicator{position:absolute;background:var(--color);border-radius:inherit;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progress, 100)) 100%;width:100%;height:100%;z-index:1}.progress__indicator--prediction{background:repeating-linear-gradient(-45deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 2.5px,transparent 2.5px,transparent 5px),var(--color);z-index:0;opacity:.25;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progressPrediction, 100)) 100%}
+.progress-linear{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;box-sizing:border-box;background:transparent;border-radius:1rem;width:100%;height:10px;position:relative;transform:translateZ(0)}.progress-linear:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:var(--color);opacity:.1;content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.progress-linear__dot{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;top:50%;transform:translate(50%) translateY(-50%);right:calc(100% - 1% * (var(--progress, 0)))}.progress-linear__indicator{position:absolute;background:var(--color);border-radius:inherit;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progress, 100)) 100%;width:100%;height:100%;z-index:1}.progress-linear__indicator--prediction{background:repeating-linear-gradient(-45deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 2.5px,transparent 2.5px,transparent 5px),var(--color);z-index:0;opacity:.25;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progressPrediction, 100)) 100%}.progress-circle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--size);height:var(--size)}.progress-circle__circle{display:block;width:var(--size);height:var(--size);transform:translateZ(0)}.progress-circle__track{opacity:.1;stroke:var(--color);stroke-linecap:round}.progress-circle__prediction{opacity:.25;stroke:url(#circle-stripe-overlay);stroke-linecap:round;z-index:1}.progress-circle__range{stroke:var(--color);stroke-linecap:round;z-index:2}.progress-circle__dot{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}

package/dist/components/form/PasswordInput.js

@@ -5,7 +5,7 @@ import { IconEye as R, IconX as z } from "@tabler/icons-react";
 import { Button as p } from "../button/Button.js";
 import { clearInputElement as P } from "./Input.utils.js";
 import { Flex as A } from "../flex/Flex.js";
-import { Progress as B } from "../progress/Progress.js";
+import { ProgressLinear as B } from "../progress/ProgressLinear.js";
 import { InputMessage as D } from "./InputMessage.js";
 import { ButtonGroup as C } from "../button-group/ButtonGroup.js";
 const X = u.forwardRef((r, t) => {

package/dist/components/progress/ProgressCircle.d.ts

@@ -0,0 +1,8 @@
+import { ProgressRootProps } from '@ark-ui/react';
+import { default as React, CSSProperties } from 'react';
+import { ProgressProps } from './ProgressLinear';
+export type ProgressCircleProps = ProgressProps & Omit<ProgressRootProps, 'value' | 'max' | 'color'> & {
+    size?: CSSProperties['width'];
+    thickness?: CSSProperties['strokeWidth'];
+};
+export declare const ProgressCircle: React.FC<ProgressCircleProps>;

package/dist/components/progress/ProgressCircle.js

@@ -0,0 +1,49 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as m } from "../../utils/component.js";
+import "js-md5";
+import { ProgressRoot as f, ProgressCircle as _, ProgressCircleTrack as P, ProgressCircleRange as c } from "@ark-ui/react";
+import '../../assets/components/progress/Progress.style.css';/* empty css                    */
+const u = (l) => {
+  const {
+    color: n = "white",
+    predictionValue: a = 0,
+    dot: p,
+    value: h,
+    max: g = 100,
+    size: d = 64,
+    thickness: i,
+    ...t
+  } = l, o = (e) => typeof e == "number" ? `${e}px` : e;
+  return /* @__PURE__ */ s(f, { value: h, max: g, ...m("progress-circle", {
+    ...t,
+    style: {
+      ...t.style,
+      "--size": o(d),
+      "--thickness": i !== void 0 ? o(i) : "calc(var(--size) / 8)",
+      "--color": n
+    }
+  }), children: [
+    /* @__PURE__ */ s(_, { className: "progress-circle__circle", children: [
+      /* @__PURE__ */ r(P, { className: "progress-circle__track" }),
+      /* @__PURE__ */ r("svg", { style: {
+        position: "absolute",
+        width: 0,
+        height: 0,
+        overflow: "hidden"
+      }, children: /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ s("pattern", { id: "circle-stripe-overlay", width: "5", height: "5", patternUnits: "userSpaceOnUse", patternTransform: "rotate(-45)", children: [
+        /* @__PURE__ */ r("rect", { width: "5", height: "5", fill: "var(--color)" }),
+        /* @__PURE__ */ r("rect", { width: "2.5", height: "5", fill: "rgba(0, 0, 0, 0.25)" })
+      ] }) }) }),
+      /* @__PURE__ */ r(c, { style: {
+        "--percent": a
+      }, className: "progress-circle__prediction" }),
+      /* @__PURE__ */ r(c, { className: "progress-circle__range" })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "progress-circle__dot", children: p })
+  ] });
+};
+export {
+  u as ProgressCircle
+};

package/dist/components/progress/ProgressLinear.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../utils';
+import { default as React, CSSProperties } from 'react';
+import * as Radix from "@radix-ui/react-progress";
+export type ProgressProps = ComponentProps & {
+    value?: number | null;
+    max?: number;
+    color?: CSSProperties['background'];
+    dot?: React.ReactNode;
+    predictionValue?: number | null;
+};
+export type ProgressLinearProps = ProgressProps & Omit<Radix.ProgressProps, 'value' | 'max' | 'color'>;
+export declare const ProgressLinear: React.FC<ProgressLinearProps>;

package/dist/components/progress/{Progress.js → ProgressLinear.js}

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import "../../utils/contextStore.js";
 import "react";
-import { mergeComponentProps as l } from "../../utils/component.js";
+import { mergeComponentProps as d } from "../../utils/component.js";
 import "js-md5";
 import * as o from "@radix-ui/react-progress";
 import '../../assets/components/progress/Progress.style.css';/* empty css                    */
@@ -9,19 +9,19 @@ const _ = (r) => {
   const {
     color: a = "white",
     predictionValue: g,
-    dot: c,
-    ...t
-  } = r, s = Math.min(r.value ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, m = `translateX(-${100 - s}%)`, i = Math.min(r.predictionValue ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, d = `translateX(-${100 - i}%)`;
-  return /* @__PURE__ */ n(o.Progress, { ...l("progress", {
-    ...t,
+    dot: l,
+    ...i
+  } = r, t = Math.min(r.value ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, c = `translateX(-${100 - t}%)`, s = Math.min(r.predictionValue ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, m = `translateX(-${100 - s}%)`;
+  return /* @__PURE__ */ n(o.Progress, { ...d("progress-linear", {
+    ...i,
     style: {
-      ...t.style,
-      "--progress": s,
-      "--progressPrediction": i,
+      ...i.style,
+      "--progress": t,
+      "--progressPrediction": s,
       "--color": a
     }
   }), children: [
-    /* @__PURE__ */ e("div", { className: "progress__dot", children: c }),
+    /* @__PURE__ */ e("div", { className: "progress-linear__dot", children: l }),
     /* @__PURE__ */ n("div", { style: {
       width: "100%",
       height: "100%",
@@ -29,15 +29,15 @@ const _ = (r) => {
       borderRadius: "inherit",
       position: "relative"
     }, children: [
-      /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress__indicator", style: {
-        transform: m
+      /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress-linear__indicator", style: {
+        transform: c
       } }),
-      typeof r.predictionValue == "number" && /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress__indicator progress__indicator--prediction", style: {
-        transform: d
+      typeof r.predictionValue == "number" && /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress-linear__indicator progress-linear__indicator--prediction", style: {
+        transform: m
       } })
     ] })
   ] });
 };
 export {
-  _ as Progress
+  _ as ProgressLinear
 };

package/dist/index.d.ts

@@ -24,7 +24,8 @@ export * from './components/gantt/Gantt';
 export * from './components/icon/Icon';
 export * from './components/layout/Layout';
 export * from './components/menu/Menu';
-export * from './components/progress/Progress';
+export * from './components/progress/ProgressLinear';
+export * from './components/progress/ProgressCircle';
 export * from './components/quote/Quote';
 export * from './components/resizable/Resizable';
 export * from './components/row/Row';

package/dist/index.js

@@ -50,26 +50,27 @@ import { Gantt as so, getRelativeValue as Do } from "./components/gantt/Gantt.js
 import { Icon as Fo, resolveIcon as Po } from "./components/icon/Icon.js";
 import { Layout as wo } from "./components/layout/Layout.js";
 import { Menu as vo, MenuArrow as Vo, MenuCheckboxItem as Lo, MenuContent as Eo, MenuGroup as Ro, MenuItem as Go, MenuItemIndicator as yo, MenuLabel as zo, MenuPortal as Bo, MenuSeparator as Ho, MenuSub as ko, MenuSubContent as No, MenuSubTrigger as Qo, MenuTrigger as Jo } from "./components/menu/Menu.js";
-import { Progress as jo } from "./components/progress/Progress.js";
-import { Quote as Ko } from "./components/quote/Quote.js";
-import { ResizableHandle as Wo, ResizablePanel as Xo, ResizablePanelGroup as Yo } from "./components/resizable/Resizable.js";
-import { Row as _o } from "./components/row/Row.js";
-import { AutoScrollArea as er, ScrollArea as tr, ScrollAreaCorner as or, ScrollAreaScrollbar as rr, ScrollAreaThumb as nr, ScrollAreaViewport as ar } from "./components/scroll-area/ScrollArea.js";
-import { SegmentedControl as ur, SegmentedControlItem as ir } from "./components/segmented-control/SegmentedControl.js";
-import { Spacing as mr } from "./components/spacing/Spacing.js";
-import { Tab as gr, TabContent as Ir, TabList as fr, TabTrigger as Cr } from "./components/tab/Tab.js";
-import { Text as dr } from "./components/text/Text.js";
-import { Toast as br, toast as cr } from "./components/toast/Toast.js";
-import { Tooltip as Dr, TooltipArrow as Mr, TooltipContent as Fr, TooltipPortal as Pr, TooltipTrigger as Ar } from "./components/tooltip/Tooltip.js";
-import { ContextStore as hr, ContextStoreProvider as vr, useService as Vr, useStore as Lr } from "./utils/contextStore.js";
-import { ReactiveArrayService as Rr, useReactiveArrayService as Gr } from "./utils/reactiveArrayService.js";
-import { mergeComponentProps as zr } from "./utils/component.js";
-import { Colors as Hr, hashToColor as kr, withAlpha as Nr } from "./utils/color.js";
-import { getSize as Jr } from "./utils/size.js";
+import { ProgressLinear as jo } from "./components/progress/ProgressLinear.js";
+import { ProgressCircle as Ko } from "./components/progress/ProgressCircle.js";
+import { Quote as Wo } from "./components/quote/Quote.js";
+import { ResizableHandle as Yo, ResizablePanel as Zo, ResizablePanelGroup as _o } from "./components/resizable/Resizable.js";
+import { Row as er } from "./components/row/Row.js";
+import { AutoScrollArea as or, ScrollArea as rr, ScrollAreaCorner as nr, ScrollAreaScrollbar as ar, ScrollAreaThumb as pr, ScrollAreaViewport as ur } from "./components/scroll-area/ScrollArea.js";
+import { SegmentedControl as lr, SegmentedControlItem as mr } from "./components/segmented-control/SegmentedControl.js";
+import { Spacing as gr } from "./components/spacing/Spacing.js";
+import { Tab as fr, TabContent as Cr, TabList as Tr, TabTrigger as dr } from "./components/tab/Tab.js";
+import { Text as br } from "./components/text/Text.js";
+import { Toast as sr, toast as Dr } from "./components/toast/Toast.js";
+import { Tooltip as Fr, TooltipArrow as Pr, TooltipContent as Ar, TooltipPortal as wr, TooltipTrigger as hr } from "./components/tooltip/Tooltip.js";
+import { ContextStore as Vr, ContextStoreProvider as Lr, useService as Er, useStore as Rr } from "./utils/contextStore.js";
+import { ReactiveArrayService as yr, useReactiveArrayService as zr } from "./utils/reactiveArrayService.js";
+import { mergeComponentProps as Hr } from "./utils/component.js";
+import { Colors as Nr, hashToColor as Qr, withAlpha as Jr } from "./utils/color.js";
+import { getSize as jr } from "./utils/size.js";
 export {
   o as Alert,
   n as AuroraBackground,
-  er as AutoScrollArea,
+  or as AutoScrollArea,
   p as Avatar,
   i as Badge,
   m as Breadcrumb,
@@ -87,7 +88,7 @@ export {
   je as ColorInputSwatch,
   qe as ColorInputTrigger,
   Ke as ColorInputValueText,
-  Hr as Colors,
+  Nr as Colors,
   A as Command,
   w as CommandDialog,
   h as CommandEmpty,
@@ -110,8 +111,8 @@ export {
   U as ContextMenuSubContent,
   W as ContextMenuSubTrigger,
   X as ContextMenuTrigger,
-  hr as ContextStore,
-  vr as ContextStoreProvider,
+  Vr as ContextStore,
+  Lr as ContextStoreProvider,
   Z as DataTable,
   $ as DataTableColumn,
   ge as DataTableFilterInput,
@@ -196,22 +197,23 @@ export {
   Ht as PinInput,
   kt as PinInputField,
   Nt as PinInputHiddenField,
-  jo as Progress,
-  Ko as Quote,
+  Ko as ProgressCircle,
+  jo as ProgressLinear,
+  Wo as Quote,
   Jt as RadioGroup,
   jt as RadioInput,
-  Rr as ReactiveArrayService,
-  Wo as ResizableHandle,
-  Xo as ResizablePanel,
-  Yo as ResizablePanelGroup,
-  _o as Row,
-  tr as ScrollArea,
-  or as ScrollAreaCorner,
-  rr as ScrollAreaScrollbar,
-  nr as ScrollAreaThumb,
-  ar as ScrollAreaViewport,
-  ur as SegmentedControl,
-  ir as SegmentedControlItem,
+  yr as ReactiveArrayService,
+  Yo as ResizableHandle,
+  Zo as ResizablePanel,
+  _o as ResizablePanelGroup,
+  er as Row,
+  rr as ScrollArea,
+  nr as ScrollAreaCorner,
+  ar as ScrollAreaScrollbar,
+  pr as ScrollAreaThumb,
+  ur as ScrollAreaViewport,
+  lr as SegmentedControl,
+  mr as SegmentedControlItem,
   Kt as SelectContent,
   Ut as SelectInput,
   Wt as SelectItem,
@@ -220,40 +222,40 @@ export {
   Zt as SelectTrigger,
   _t as SelectValue,
   $t as SelectViewport,
-  mr as Spacing,
+  gr as Spacing,
   to as SwitchInput,
-  gr as Tab,
-  Ir as TabContent,
-  fr as TabList,
-  Cr as TabTrigger,
+  fr as Tab,
+  Cr as TabContent,
+  Tr as TabList,
+  dr as TabTrigger,
   ro as TagInput,
   no as TagInputMenu,
   ao as TagInputMenuItem,
   po as TagInputSubMenu,
   uo as TagInputTrigger,
   io as TagInputValue,
-  dr as Text,
+  br as Text,
   mo as TextAreaInput,
   go as TextInput,
-  br as Toast,
-  Dr as Tooltip,
-  Mr as TooltipArrow,
-  Fr as TooltipContent,
-  Pr as TooltipPortal,
-  Ar as TooltipTrigger,
+  sr as Toast,
+  Fr as Tooltip,
+  Pr as TooltipArrow,
+  Ar as TooltipContent,
+  wr as TooltipPortal,
+  hr as TooltipTrigger,
   Ie as createFilterQueryLanguage,
   mt as emailValidation,
   Do as getRelativeValue,
-  Jr as getSize,
-  kr as hashToColor,
-  zr as mergeComponentProps,
+  jr as getSize,
+  Qr as hashToColor,
+  Hr as mergeComponentProps,
   zt as passwordValidation,
   Po as resolveIcon,
-  cr as toast,
+  Dr as toast,
   me as useDataTablePagination,
   fo as useForm,
-  Gr as useReactiveArrayService,
-  Vr as useService,
-  Lr as useStore,
-  Nr as withAlpha
+  zr as useReactiveArrayService,
+  Er as useService,
+  Rr as useStore,
+  Jr as withAlpha
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {

package/dist/components/progress/Progress.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps } from '../../utils';
-import { default as React, CSSProperties } from 'react';
-import * as Radix from "@radix-ui/react-progress";
-export type ProgressProps = ComponentProps & Radix.ProgressProps & {
-    color?: CSSProperties['background'];
-    dot?: React.ReactNode;
-    predictionValue?: number | null;
-};
-export declare const Progress: React.FC<ProgressProps>;