@cerberus-design/react 0.18.1 → 0.18.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1460,6 +1460,8 @@ declare interface Conditions {
1460
1460
  "_groupInvalid": string
1461
1461
  /** `.group:is([data-checked="true"] &, [aria-checked="true"]) &` */
1462
1462
  "_groupChecked": string
1463
+ /** `&:is(:not([disabled]), [data-disabled=false])` */
1464
+ "_notDisabled": string
1463
1465
  /** `&:is([data-today=true], [data-date=today])` */
1464
1466
  "_today": string
1465
1467
  /** `&:is([data-past-day=true], [data-date=past])` */
@@ -38,8 +38,18 @@ function Show(props) {
38
38
  return null;
39
39
  }
40
40
 
41
- // src/components/CircularProgress.tsx
41
+ // src/components/for.tsx
42
42
  var import_jsx_runtime2 = require("react/jsx-runtime");
43
+ function For(props) {
44
+ var _a;
45
+ if (!props.each || !props.each.length) {
46
+ return props.fallback || null;
47
+ }
48
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: (_a = props.each) == null ? void 0 : _a.map(props.children) });
49
+ }
50
+
51
+ // src/components/CircularProgress.tsx
52
+ var import_jsx_runtime3 = require("react/jsx-runtime");
43
53
  function CircularProgress(props) {
44
54
  const { size = "1.1em" } = props;
45
55
  const sizeProps = props.size ? {
@@ -52,7 +62,7 @@ function CircularProgress(props) {
52
62
  const now = props.now >= 100 ? 100 : props.now;
53
63
  const bgStyle = props.bgStyle ?? "filled";
54
64
  const styles = (0, import_recipes.circularProgress)();
55
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
65
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
56
66
  "div",
57
67
  {
58
68
  id: props.id,
@@ -62,7 +72,7 @@ function CircularProgress(props) {
62
72
  "aria-valuenow": now,
63
73
  className: styles.root,
64
74
  role: "progressbar",
65
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
75
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
66
76
  "svg",
67
77
  {
68
78
  "data-complete": now === 100,
@@ -74,17 +84,17 @@ function CircularProgress(props) {
74
84
  xmlns: "http://www.w3.org/2000/svg",
75
85
  ...sizeProps,
76
86
  children: [
77
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: props.title }),
78
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("desc", { children: `${now}% ${status}` }),
79
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: "gradient", children: [
80
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
87
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: props.title }),
88
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("desc", { children: `${now}% ${status}` }),
89
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "gradient", children: [
90
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
81
91
  "stop",
82
92
  {
83
93
  offset: "0%",
84
94
  stopColor: "var(--cerberus-colors-data-viz-progress-start)"
85
95
  }
86
96
  ),
87
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
97
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
88
98
  "stop",
89
99
  {
90
100
  offset: "100%",
@@ -92,7 +102,7 @@ function CircularProgress(props) {
92
102
  }
93
103
  )
94
104
  ] }) }),
95
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
105
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
96
106
  "circle",
97
107
  {
98
108
  className: styles.base,
@@ -102,7 +112,7 @@ function CircularProgress(props) {
102
112
  pathLength: "100"
103
113
  }
104
114
  ) }),
105
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
115
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
106
116
  "circle",
107
117
  {
108
118
  className: styles.track,
@@ -112,48 +122,69 @@ function CircularProgress(props) {
112
122
  pathLength: "100"
113
123
  }
114
124
  ),
115
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
116
- "circle",
125
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
126
+ Show,
117
127
  {
118
- "data-complete": now === 100,
119
- className: styles.path,
120
- cx: "50%",
121
- cy: "50%",
122
- fill: "none",
123
- r: radius,
124
- pathLength: "100",
125
- strokeDasharray: "100",
126
- strokeDashoffset: 100 - now,
127
- transform: "rotate(-90 50 50)"
128
+ when: now > 0,
129
+ fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
130
+ "text",
131
+ {
132
+ "data-fallback": true,
133
+ className: styles.description,
134
+ x: "50%",
135
+ y: "27%",
136
+ dominantBaseline: "middle",
137
+ textAnchor: "middle",
138
+ textLength: "65%",
139
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(For, { each: status.split(" "), children: (word, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tspan", { x: "50%", dy: "1.2em", children: word }, `${word}:${idx}`) })
140
+ }
141
+ ),
142
+ children: [
143
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
144
+ "circle",
145
+ {
146
+ "data-complete": now === 100,
147
+ className: styles.path,
148
+ cx: "50%",
149
+ cy: "50%",
150
+ fill: "none",
151
+ r: radius,
152
+ pathLength: "100",
153
+ strokeDasharray: "100",
154
+ strokeDashoffset: 100 - now,
155
+ transform: "rotate(-90 50 50)"
156
+ }
157
+ ),
158
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
159
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
160
+ "text",
161
+ {
162
+ className: styles.title,
163
+ x: "50%",
164
+ y: "47%",
165
+ dominantBaseline: "middle",
166
+ textAnchor: "middle",
167
+ children: [
168
+ now,
169
+ "%"
170
+ ]
171
+ }
172
+ ),
173
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
174
+ "text",
175
+ {
176
+ className: styles.description,
177
+ x: "50%",
178
+ y: "59%",
179
+ dominantBaseline: "middle",
180
+ textAnchor: "middle",
181
+ children: status
182
+ }
183
+ )
184
+ ] })
185
+ ]
128
186
  }
129
- ),
130
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
131
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
132
- "text",
133
- {
134
- className: styles.title,
135
- x: "50%",
136
- y: "47%",
137
- dominantBaseline: "middle",
138
- textAnchor: "middle",
139
- children: [
140
- now,
141
- "%"
142
- ]
143
- }
144
- ),
145
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
146
- "text",
147
- {
148
- className: styles.description,
149
- x: "50%",
150
- y: "59%",
151
- dominantBaseline: "middle",
152
- textAnchor: "middle",
153
- children: status
154
- }
155
- )
156
- ] })
187
+ )
157
188
  ]
158
189
  }
159
190
  )
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CircularProgress.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import { circularProgress } from 'styled-system/recipes'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n /**\n * A unique identifier for the progress bar. Required for accessibility.\n */\n id: string\n /**\n * A description label for the progress bar. Required for accessibility.\n */\n label: string\n /**\n * The current value of the CircularProgress\n */\n now: number\n /**\n * The title of the CircularProgress for a11y\n */\n title: string\n /**\n * What is shown below the now value (default: 'Done')\n */\n syntax?: string\n /**\n * The background style of the CircularProgress\n */\n bgStyle?: 'filled' | 'transparent'\n /**\n * The size of the CircularProgress\n * @default '1.1em'\n */\n size?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n const { size = '1.1em' } = props\n const sizeProps = props.size\n ? {\n height: size,\n width: size,\n }\n : {}\n\n const strokeW: number = 14\n const radius = `calc(50% * (1 - ${strokeW}/100))`\n const status: string = props.syntax ?? 'Done'\n const now: number = props.now >= 100 ? 100 : props.now\n const bgStyle: string = props.bgStyle ?? 'filled'\n\n const styles = circularProgress()\n\n return (\n <div\n id={props.id}\n aria-label={props.label}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={now}\n className={styles.root}\n role=\"progressbar\"\n >\n <svg\n data-complete={now === 100}\n className={styles.group}\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeWidth={strokeW}\n viewBox=\"0 0 100 100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...sizeProps}\n >\n <title>{props.title}</title>\n <desc>{`${now}% ${status}`}</desc>\n <defs>\n <linearGradient id=\"gradient\">\n <stop\n offset=\"0%\"\n stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n />\n <stop\n offset=\"100%\"\n stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n />\n </linearGradient>\n </defs>\n\n <Show when={bgStyle === 'filled'}>\n <circle\n className={styles.base}\n cx=\"50%\"\n cy=\"50%\"\n r={`calc(50% * (1 - ${strokeW}/100))`}\n pathLength=\"100\"\n />\n </Show>\n\n <circle\n className={styles.track}\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n pathLength=\"100\"\n />\n\n <circle\n data-complete={now === 100}\n className={styles.path}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r={radius}\n pathLength=\"100\"\n strokeDasharray=\"100\"\n strokeDashoffset={100 - now}\n transform=\"rotate(-90 50 50)\"\n />\n\n <g>\n <text\n className={styles.title}\n x=\"50%\"\n y=\"47%\"\n dominantBaseline=\"middle\"\n textAnchor=\"middle\"\n >\n {now}%\n </text>\n <text\n className={styles.description}\n x=\"50%\"\n y=\"59%\"\n dominantBaseline=\"middle\"\n textAnchor=\"middle\"\n >\n {status}\n </text>\n </g>\n </svg>\n </div>\n )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../../src/components/CircularProgress.tsx","../../../src/components/Show.tsx","../../../src/components/for.tsx"],"sourcesContent":["import { circularProgress } from 'styled-system/recipes'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\nimport { For } from './for'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n /**\n * A unique identifier for the progress bar. Required for accessibility.\n */\n id: string\n /**\n * A description label for the progress bar. Required for accessibility.\n */\n label: string\n /**\n * The current value of the CircularProgress\n */\n now: number\n /**\n * The title of the CircularProgress for a11y\n */\n title: string\n /**\n * What is shown below the now value (default: 'Done')\n */\n syntax?: string\n /**\n * The background style of the CircularProgress\n */\n bgStyle?: 'filled' | 'transparent'\n /**\n * The size of the CircularProgress\n * @default '1.1em'\n */\n size?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n const { size = '1.1em' } = props\n const sizeProps = props.size\n ? {\n height: size,\n width: size,\n }\n : {}\n\n const strokeW: number = 14\n const radius = `calc(50% * (1 - ${strokeW}/100))`\n const status: string = props.syntax ?? 'Done'\n const now: number = props.now >= 100 ? 100 : props.now\n const bgStyle: string = props.bgStyle ?? 'filled'\n\n const styles = circularProgress()\n\n return (\n <div\n id={props.id}\n aria-label={props.label}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={now}\n className={styles.root}\n role=\"progressbar\"\n >\n <svg\n data-complete={now === 100}\n className={styles.group}\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeWidth={strokeW}\n viewBox=\"0 0 100 100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...sizeProps}\n >\n <title>{props.title}</title>\n <desc>{`${now}% ${status}`}</desc>\n\n <defs>\n <linearGradient id=\"gradient\">\n <stop\n offset=\"0%\"\n stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n />\n <stop\n offset=\"100%\"\n stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n />\n </linearGradient>\n </defs>\n\n <Show when={bgStyle === 'filled'}>\n <circle\n className={styles.base}\n cx=\"50%\"\n cy=\"50%\"\n r={`calc(50% * (1 - ${strokeW}/100))`}\n pathLength=\"100\"\n />\n </Show>\n\n <circle\n className={styles.track}\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n pathLength=\"100\"\n />\n\n <Show\n when={now > 0}\n fallback={\n <text\n data-fallback\n className={styles.description}\n x=\"50%\"\n y=\"27%\"\n dominantBaseline=\"middle\"\n textAnchor=\"middle\"\n textLength=\"65%\"\n >\n <For each={status.split(' ')}>\n {(word, idx) => (\n <tspan key={`${word}:${idx}`} x=\"50%\" dy=\"1.2em\">\n {word}\n </tspan>\n )}\n </For>\n </text>\n }\n >\n <circle\n data-complete={now === 100}\n className={styles.path}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r={radius}\n pathLength=\"100\"\n strokeDasharray=\"100\"\n strokeDashoffset={100 - now}\n transform=\"rotate(-90 50 50)\"\n />\n <g>\n <text\n className={styles.title}\n x=\"50%\"\n y=\"47%\"\n dominantBaseline=\"middle\"\n textAnchor=\"middle\"\n >\n {now}%\n </text>\n <text\n className={styles.description}\n x=\"50%\"\n y=\"59%\"\n dominantBaseline=\"middle\"\n textAnchor=\"middle\"\n >\n {status}\n </text>\n </g>\n </Show>\n </svg>\n </div>\n )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n","import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n /**\n * The array to iterate over.\n */\n each: T | undefined | null | false\n /**\n * The fallback to render when the array is empty.\n */\n fallback?: JSX.Element\n /**\n * The children to render for each item in the array.\n */\n children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n * {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n props: ForProps<T, U>,\n) {\n if (!props.each || !props.each.length) {\n return props.fallback || null\n }\n\n return <>{props.each?.map(props.children) as ReactNode}</>\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}