@kakadu/components 0.1.0

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.
Files changed (54) hide show
  1. package/build/atom-B-bW2QKm.js +1 -0
  2. package/build/atom-CqxGy6PS.mjs +12 -0
  3. package/build/atom.d.ts +2 -0
  4. package/build/atom.js +1 -0
  5. package/build/atom.mjs +5 -0
  6. package/build/box-C72tT5hd.js +1 -0
  7. package/build/box-DQbqyewI.mjs +13 -0
  8. package/build/box.d.ts +1 -0
  9. package/build/box.js +1 -0
  10. package/build/box.mjs +4 -0
  11. package/build/components/atom.d.ts +10 -0
  12. package/build/components/box.d.ts +4 -0
  13. package/build/components/flex.d.ts +6 -0
  14. package/build/components/gauge.d.ts +6 -0
  15. package/build/components/skeleton.d.ts +13 -0
  16. package/build/components/spinner.d.ts +5 -0
  17. package/build/components/text.d.ts +7 -0
  18. package/build/components.css +1 -0
  19. package/build/flex-Czl688kn.js +1 -0
  20. package/build/flex-a_d7XX18.mjs +15 -0
  21. package/build/flex.d.ts +2 -0
  22. package/build/flex.js +1 -0
  23. package/build/flex.mjs +4 -0
  24. package/build/gauge-DHIuVOGi.mjs +41 -0
  25. package/build/gauge-Y0dT3vhB.js +1 -0
  26. package/build/gauge.d.ts +2 -0
  27. package/build/gauge.js +1 -0
  28. package/build/gauge.mjs +4 -0
  29. package/build/index.d.ts +11 -0
  30. package/build/index.js +1 -0
  31. package/build/index.mjs +26 -0
  32. package/build/jsx-runtime-B4hRZ52C.mjs +282 -0
  33. package/build/jsx-runtime-BB_1_6y_.js +22 -0
  34. package/build/skeleton-BL8lC2O4.js +1 -0
  35. package/build/skeleton-CWUXsrG6.mjs +48 -0
  36. package/build/skeleton.d.ts +1 -0
  37. package/build/skeleton.js +1 -0
  38. package/build/skeleton.mjs +5 -0
  39. package/build/spinner-Bal8iQ21.mjs +14 -0
  40. package/build/spinner-DQcSzoeb.js +1 -0
  41. package/build/spinner.d.ts +1 -0
  42. package/build/spinner.js +1 -0
  43. package/build/spinner.mjs +4 -0
  44. package/build/text-B_B-fHoN.mjs +39 -0
  45. package/build/text-COwGgyWJ.js +1 -0
  46. package/build/text.d.ts +1 -0
  47. package/build/text.js +1 -0
  48. package/build/text.mjs +7 -0
  49. package/build/theme.d.ts +16 -0
  50. package/build/theme.js +1 -0
  51. package/build/theme.mjs +17 -0
  52. package/package.json +190 -0
  53. package/readme.md +9 -0
  54. package/theme.tsx +130 -0
@@ -0,0 +1 @@
1
+ "use strict";const m=require("react"),e="div";function o({as:t,reference:r,...n}){return m.createElement(t??e,{...n,ref:r})}exports.Atom=o;exports.defaultAtomElementType=e;
@@ -0,0 +1,12 @@
1
+ import { createElement as r } from "react";
2
+ const m = "div";
3
+ function a({ as: e, reference: t, ...o }) {
4
+ return r(e ?? m, {
5
+ ...o,
6
+ ref: t
7
+ });
8
+ }
9
+ export {
10
+ a as A,
11
+ m as d
12
+ };
@@ -0,0 +1,2 @@
1
+ export { default, defaultAtomElementType } from './components/atom';
2
+ export type { AtomProperties, DefaultAtomElementType } from './components/atom';
package/build/atom.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./atom-B-bW2QKm.js");exports.default=e.Atom;exports.defaultAtomElementType=e.defaultAtomElementType;
package/build/atom.mjs ADDED
@@ -0,0 +1,5 @@
1
+ import { A as a, d } from "./atom-CqxGy6PS.mjs";
2
+ export {
3
+ a as default,
4
+ d as defaultAtomElementType
5
+ };
@@ -0,0 +1 @@
1
+ "use strict";const r=require("./jsx-runtime-BB_1_6y_.js"),o=require("@kuma-ui/core"),u=require("./atom-B-bW2QKm.js");function c({as:e,className:s,...t}){return r.jsxRuntimeExports.jsx(u.Atom,{as:e??"div",...t,className:o.cx("kuma-1846349723",s)})}exports.Box=c;
@@ -0,0 +1,13 @@
1
+ import { j as s } from "./jsx-runtime-B4hRZ52C.mjs";
2
+ import { cx as t } from "@kuma-ui/core";
3
+ import { A as a } from "./atom-CqxGy6PS.mjs";
4
+ function e({
5
+ as: o,
6
+ className: m,
7
+ ...r
8
+ }) {
9
+ return /* @__PURE__ */ s.jsx(a, { as: o ?? "div", ...r, className: t("kuma-1846349723", m) });
10
+ }
11
+ export {
12
+ e as B
13
+ };
package/build/box.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './components/box';
package/build/box.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./box-C72tT5hd.js");exports.default=e.Box;
package/build/box.mjs ADDED
@@ -0,0 +1,4 @@
1
+ import { B as f } from "./box-DQbqyewI.mjs";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1,10 @@
1
+ import { type ElementType, type ComponentPropsWithoutRef, type ComponentRef, type Ref } from 'react';
2
+ export declare const defaultAtomElementType = "div";
3
+ export type AtomElementType = ElementType;
4
+ export type DefaultAtomElementType = typeof defaultAtomElementType;
5
+ export type AtomProperties<Type extends ElementType = DefaultAtomElementType> = ComponentPropsWithoutRef<Type> & {
6
+ readonly as?: Type;
7
+ readonly reference?: Ref<ComponentRef<Type>>;
8
+ readonly className?: string;
9
+ };
10
+ export default function Atom<Type extends ElementType = DefaultAtomElementType>({ as, reference, ...properties }: AtomProperties<Type>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -0,0 +1,4 @@
1
+ import { type AtomElementType, type AtomProperties } from './atom';
2
+ type BoxProperties<Type extends AtomElementType = 'div'> = AtomProperties<Type>;
3
+ export default function Box<Type extends AtomElementType = 'div'>({ as, className, ...properties }: BoxProperties<Type>): import("react/jsx-runtime").JSX.Element;
4
+ export {};
@@ -0,0 +1,6 @@
1
+ import { type AtomElementType, type AtomProperties, type DefaultAtomElementType } from './atom';
2
+ export type FlexProperties<Type extends AtomElementType = DefaultAtomElementType> = AtomProperties<Type> & {
3
+ readonly direction?: 'row' | 'column';
4
+ readonly gap?: 0.25 | 0.375 | 0.5 | 1 | 1.5 | 2;
5
+ };
6
+ export default function Flex<Type extends AtomElementType = DefaultAtomElementType>({ as, direction, gap, className, ...properties }: FlexProperties<Type>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ export type GaugeProperties = {
2
+ readonly label: string;
3
+ readonly size?: 'small' | 'medium' | 'large';
4
+ readonly percentage?: number;
5
+ };
6
+ export default function Gauge({ label, size, percentage }: GaugeProperties): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { type HTMLAttributes } from 'react';
2
+ type SkeletonProperties = {
3
+ readonly width?: string | number;
4
+ readonly height?: string | number;
5
+ readonly className?: string;
6
+ readonly isAnimated?: boolean;
7
+ } & HTMLAttributes<HTMLDivElement>;
8
+ export declare function SkeletonInstance({ width, height, className, children, isAnimated, ...parameters }: SkeletonProperties): import("react/jsx-runtime").JSX.Element;
9
+ export default function Skeleton({ lines, isAnimated, }: {
10
+ readonly lines?: number;
11
+ readonly isAnimated?: boolean;
12
+ }): import("react/jsx-runtime").JSX.Element | null;
13
+ export {};
@@ -0,0 +1,5 @@
1
+ export default function Spinner({ size, strokeWidth, isAnimated, }: {
2
+ readonly size?: number;
3
+ readonly strokeWidth?: number;
4
+ readonly isAnimated?: boolean;
5
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { type ElementType } from 'react';
2
+ import { type AtomProperties } from './atom';
3
+ export declare function Heading<Type extends ElementType = 'h1'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
4
+ export declare const spanStyles: string;
5
+ export declare function Paragraph<Type extends ElementType = 'p'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
6
+ export declare function Span<Type extends ElementType = 'span'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
7
+ export default function Text<Type extends ElementType = 'div'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ .kuma-1846349723{background:#fefefe;padding:var(--gap);box-shadow:inset 0 0 0 1px #0003,inset 0 0 0 2px #ffffffbf,inset 0 4px #00000006,0 0 2px 1px #ffffff80,0 1px 1px #00000008,0 3px #00000008;border-radius:12px}.kuma-1168981339{display:flex}.kuma-2635417128{flex-direction:column}.kuma-2276234075{gap:var(--quarter-gap)}.kuma-739568937{gap:var(--third-gap)}.kuma-3438335458{gap:var(--half-gap)}.kuma-3993051137{gap:var(--gap)}.kuma-4186556816{gap:var(--sesquialteral-gap)}.kuma-1435205015{gap:var(--double-gap)}.kuma-3997436555{--background-color:#fafcff;--foreground-color:#000;--blue-color:#2f455d;--blue-dark-color:#32445b;--blue-hover-color:#345882;--blue-light-color:#b3c0d4;--blue-pale-color:#e1efff;--green-color:#4ca486;--green-pale-color:#dceeec;--green-dark-color:#3c6957;--grey-color:#c6c6c6;--grey-pale-color:#dfdfdf;--red-color:#ff4d4d;--red-pale-color:#ffe5e5;--red-pale-hover-color:#ffd6d6;--yellow-color:#f5c235;--yellow-dark-color:#9f7605;--flash-color:rgba(255, 216, 57, .5);--font-weight-modifier:50;--accent-font-family:"Frank Ruhl Libre",serif;--font-family:"Inter",-apple-system,helvetica,arial,sans-serif;--gap:16px;--quarter-gap:calc(var(--gap) / 4);--third-gap:calc(var(--gap) / 3);--half-gap:calc(var(--gap) / 2);--sesquialteral-gap:calc(var(--gap) * 1.5);--double-gap:calc(var(--gap) * 2);--triple-gap:calc(var(--gap) * 3);--quadruple-gap:calc(var(--gap) * 4);--sidebar-z-index:424242;--modal-z-index:424243;font-family:var(--font-family);font-optical-sizing:auto;line-height:normal;color:var(--foreground-color);--8px:.5rem;--9px:.5625rem;--10px:.625rem;--11px:.6875rem;--12px:.75rem;--13px:.8125rem;--14px:.875rem;--15px:.9375rem;--16px:1rem;--17px:1.0625rem;--18px:1.125rem;--19px:1.1875rem;--20px:1.25rem;--21px:1.3125rem;--22px:1.375rem;--23px:1.4375rem;--24px:1.5rem;--25px:1.5625rem;--26px:1.625rem;--27px:1.6875rem;--28px:1.75rem;--29px:1.8125rem;--30px:1.875rem;--31px:1.9375rem;--32px:2rem;--33px:2.0625rem;--34px:2.125rem;--35px:2.1875rem;--36px:2.25rem;--37px:2.3125rem;--38px:2.375rem;--39px:2.4375rem;--40px:2.5rem;--41px:2.5625rem;--42px:2.625rem;--43px:2.6875rem;--44px:2.75rem;--45px:2.8125rem;--46px:2.875rem;--47px:2.9375rem;--48px:3rem}.kuma-3997436555 :where([data-theme=dark]){--font-weight-modifier:0}.kuma-4178476647{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.kuma-216224454{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;text-align:left;border:0;margin:0;padding:0;cursor:pointer}[dir=rtl] .kuma-216224454{text-align:right}.kuma-2934642132{font-family:var(--accent-font-family);font-size:var(--37px);font-weight:650;padding:0;margin:0}.kuma-1010422083{font-family:var(--font-family);font-size:var(--16px)}.kuma-1010422083 b{font-weight:500}.kuma-1010422083 strong{font-weight:600}.kuma-1010422083 a{color:var(--green-dark-color);text-decoration:underline}@media(hover:hover){.kuma-1010422083 a:hover{text-decoration:none}}.kuma-2351087175{font-size:var(--18px);font-weight:425;line-height:1.5em;padding:0;margin:0}.kuma-2351087175 ol{margin:0;margin-top:var(--gap);padding:0;list-style-position:inside}.kuma-2351087175 li::marker{font-weight:600}.kuma-2351087175 pre{background:#00000006;font-size:var(--12px);line-height:1.5em;color:#000;margin:0;white-space:pre-wrap;overflow:auto;padding:var(--gap);border-radius:var(--half-gap);box-sizing:border-box;margin:var(--gap) 0;box-shadow:inset 0 0 0 1px #0003}.kuma-2608978433{max-width:720px;text-wrap:pretty}.kuma-2608978433 h1:has(+p:last-child){font-size:var(--32px)}.kuma-2608978433 h1+:is(p,ul){margin-top:.75em}.kuma-2608978433 h1+:is(p,ul):last-child{margin-top:.25em}.kuma-2608978433 h1+p:has(+p){font-size:var(--22px);font-weight:275;line-height:1.3em;opacity:.75}.kuma-2608978433 h1+p:has(+p)+p{margin-top:1.25em}.kuma-2608978433 p+:is(p){margin-top:.75em}.kuma-361702174{--size:80px;--thickness:13px;--font-size:var(--25px);--font-weight:600;--offset:2px;--highlight-color:rgba(255, 255, 255, .2);--shadow-color:rgba(0, 0, 0, .1);--hard-shadow-offset:4px;--hard-shadow-color:rgba(0, 0, 0, .05);background:#f9f9f9;width:var(--size);height:var(--size);box-shadow:0 1px 0 var(--shadow-color),0 var(--hard-shadow-offset) 0 var(--hard-shadow-color),inset 0 1px 0 var(--shadow-color),inset 0 2px 0 var(--highlight-color);border-radius:var(--size);position:relative;display:flex;align-items:center;justify-content:center}.kuma-3162945807{--size:60px;--thickness:11px;--font-size:var(--18px);--font-weight:600;--offset:2px}.kuma-2977513648{--size:100px;--thickness:17px;--font-size:var(--32px);--offset:3px}.kuma-707327569{background:var(--start-color);width:var(--thickness);height:var(--thickness);border-radius:var(--thickness);position:absolute;top:50%;left:0;transform:translateY(-50%);box-shadow:0 1px 0 var(--shadow-color),0 var(--hard-shadow-offset) 0 var(--hard-shadow-color),inset 0 0 0 1px var(--shadow-color),0 0 2px #fff3}.kuma-3185646656{width:100%;height:100%;background:conic-gradient(from -90deg,var(--gradient));-webkit-mask-image:conic-gradient(from -90deg,#000 0%,#000 var(--percentage),transparent var(--percentage),transparent 100%);mask-image:conic-gradient(from -90deg,#000 0%,#000 var(--percentage),transparent var(--percentage),transparent 100%);border-radius:var(--size);box-shadow:0 1px 0 var(--shadow-color),0 var(--hard-shadow-offset) 0 var(--hard-shadow-color),inset 0 4px #ffffff26,inset 0 0 0 1px var(--shadow-color)}.kuma-257978560{--inner-size:calc(var(--size) - (var(--thickness) * 2));background:#0000002d;width:var(--inner-size);height:var(--inner-size);border-radius:var(--inner-size);box-shadow:0 0 0 1px #00000026,0 0 2px #fff6;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.kuma-586099934{--inner-size:calc(var(--size) - var(--thickness) * 2);background:#fff;width:var(--inner-size);height:var(--inner-size);font-size:var(--font-size);font-weight:var(--font-weight);font-variant-numeric:tabular-nums;letter-spacing:-.07em;border-radius:var(--inner-size);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 0 var(--shadow-color),0 2px 0 var(--highlight-color),inset 0 var(--hard-shadow-offset) 0 var(--hard-shadow-color),inset 0 1px 0 var(--shadow-color);position:absolute}.kuma-967240013{--dial-size:calc(var(--thickness) + (var(--offset) * 2));--radius:calc((var(--size) / 2) - var(--offset));--angle:calc(-180deg + (var(--percentage-factor) * 360deg));background:#fff;width:var(--dial-size);height:var(--dial-size);border-radius:var(--dial-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(var(--angle)) translate(calc(var(--radius) - (var(--offset) * 2))) rotate(calc(var(--angle) * -1));box-shadow:0 1px 0 var(--shadow-color),0 var(--hard-shadow-offset) 0 var(--hard-shadow-color),0 0 1px #00000080}.kuma-3225063030{--dial-cutout-size:calc(var(--dial-size) / 2.25);background:var(--end-color);width:var(--dial-cutout-size);height:var(--dial-cutout-size);border-radius:var(--dial-cutout-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px var(--shadow-color),inset 0 var(--hard-shadow-offset) 0 0 var(--hard-shadow-color)}.kuma-3027005914{--background-size:300px;--background-negative-size:calc(var(--background-size) * -1);--highlight-color:255,255,255;--border-radius:100px;background:#00000026;width:var(--skeleton-size, 100%);height:var(--skeleton-size);border-radius:var(--border-radius);display:inline-block;vertical-align:top;position:relative}@keyframes skeleton-animation{0%{background-position:var(--background-negative-size) 0%}to{background-position:right var(--background-negative-size) top 0%}}.kuma-3311350973{--opacity:.3}.kuma-3311350973:before{content:"";mix-blend-mode:overlay;background-position:var(--background-negative-size) 0%;background-attachment:fixed;background-size:var(--background-size) 100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,rgba(var(--highlight-color),0),rgba(var(--highlight-color),var(--opacity)),rgba(var(--highlight-color),0));animation:skeleton-animation 1.1s infinite ease-in-out;will-change:background-position;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--border-radius)}.kuma-3140855657{vertical-align:middle}.kuma-2940817552{display:inline-block;vertical-align:top}.kuma-2073235239{animation:loading-spinner .97s linear infinite}@keyframes loading-spinner{0%{transform:rotate(0)}to{transform:rotate(359.999deg)}}
@@ -0,0 +1 @@
1
+ "use strict";const o=require("./jsx-runtime-BB_1_6y_.js"),r=require("@kuma-ui/core"),e=require("./atom-B-bW2QKm.js");function c({as:m,direction:t="column",gap:u=1,className:s,...n}){return o.jsxRuntimeExports.jsx(e.Atom,{as:m??e.defaultAtomElementType,...n,className:r.cx("kuma-1168981339",t==="column"&&"kuma-2635417128",u===.25&&"kuma-2276234075",u===.375&&"kuma-739568937",u===.5&&"kuma-3438335458",u===1&&"kuma-3993051137",u===1.5&&"kuma-4186556816",u===2&&"kuma-1435205015",s)})}exports.Flex=c;
@@ -0,0 +1,15 @@
1
+ import { j as r } from "./jsx-runtime-B4hRZ52C.mjs";
2
+ import { cx as s } from "@kuma-ui/core";
3
+ import { A as e, d as k } from "./atom-CqxGy6PS.mjs";
4
+ function c({
5
+ as: u,
6
+ direction: o = "column",
7
+ gap: m = 1,
8
+ className: t,
9
+ ...a
10
+ }) {
11
+ return /* @__PURE__ */ r.jsx(e, { as: u ?? k, ...a, className: s("kuma-1168981339", o === "column" && "kuma-2635417128", m === 0.25 && "kuma-2276234075", m === 0.375 && "kuma-739568937", m === 0.5 && "kuma-3438335458", m === 1 && "kuma-3993051137", m === 1.5 && "kuma-4186556816", m === 2 && "kuma-1435205015", t) });
12
+ }
13
+ export {
14
+ c as F
15
+ };
@@ -0,0 +1,2 @@
1
+ export { default } from './components/flex';
2
+ export type { FlexProperties } from './components/flex';
package/build/flex.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./flex-Czl688kn.js");exports.default=e.Flex;
package/build/flex.mjs ADDED
@@ -0,0 +1,4 @@
1
+ import { F as f } from "./flex-a_d7XX18.mjs";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1,41 @@
1
+ import { j as s } from "./jsx-runtime-B4hRZ52C.mjs";
2
+ import { useMemo as e } from "react";
3
+ import { cx as E } from "@kuma-ui/core";
4
+ const c = {
5
+ /* eslint-disable @typescript-eslint/naming-convention */
6
+ 0: ["#D60D43"],
7
+ 15: ["#D60D43", "#FFCD45"],
8
+ 30: ["#D6460D", "#ffda54"],
9
+ 50: ["#D6860D", "#F1DC3B", "#CEE838"],
10
+ 65: ["#D6BE0D", "#FFD045", "#6DE838"],
11
+ 80: ["#D9E838", "#93E838", "#3EE838"],
12
+ 100: ["#55EB62", "#38E99A", "#5EEA52"]
13
+ /* eslint-enable @typescript-eslint/naming-convention */
14
+ }, f = Object.keys(c).map((o) => Number.parseInt(o, 10)).sort((o, t) => t - o);
15
+ function h({
16
+ label: o,
17
+ size: t,
18
+ percentage: l = 0
19
+ }) {
20
+ const a = e(() => Math.max(0, Math.min(100, l)), [l]), u = e(() => a / 100, [a]), r = e(() => {
21
+ for (const n of f)
22
+ if (a >= n)
23
+ return c[n];
24
+ return [];
25
+ }, [a]), m = e(() => r.length, [r]), i = e(() => r.at(0), [r]), d = e(() => r.at(-1), [r]), D = e(() => r.map((n, x) => `${n} ${Math.round(x / m * 100)}%`).join(", "), [r, m]);
26
+ return /* @__PURE__ */ s.jsxs("div", { style: {
27
+ "--percentage": `${a}%`,
28
+ "--percentage-factor": u,
29
+ "--gradient": D,
30
+ "--start-color": i,
31
+ "--end-color": d
32
+ }, role: "meter", "aria-valuenow": a, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": o, className: E("kuma-361702174", t === "small" && "kuma-3162945807", t === "large" && "kuma-2977513648"), children: [
33
+ a > 0 ? /* @__PURE__ */ s.jsx("div", { className: "kuma-707327569" }) : null,
34
+ /* @__PURE__ */ s.jsx("div", { className: "kuma-3185646656", children: /* @__PURE__ */ s.jsx("div", { className: "kuma-257978560" }) }),
35
+ /* @__PURE__ */ s.jsx("div", { className: "kuma-586099934", children: a }),
36
+ a > 0 && a < 100 ? /* @__PURE__ */ s.jsx("div", { className: "kuma-967240013", children: /* @__PURE__ */ s.jsx("div", { className: "kuma-3225063030" }) }) : null
37
+ ] });
38
+ }
39
+ export {
40
+ h as G
41
+ };
@@ -0,0 +1 @@
1
+ "use strict";const r=require("./jsx-runtime-BB_1_6y_.js"),t=require("react"),j=require("@kuma-ui/core"),c={0:["#D60D43"],15:["#D60D43","#FFCD45"],30:["#D6460D","#ffda54"],50:["#D6860D","#F1DC3B","#CEE838"],65:["#D6BE0D","#FFD045","#6DE838"],80:["#D9E838","#93E838","#3EE838"],100:["#55EB62","#38E99A","#5EEA52"]},D=Object.keys(c).map(a=>Number.parseInt(a,10)).sort((a,o)=>o-a);function k({label:a,size:o,percentage:u=0}){const e=t.useMemo(()=>Math.max(0,Math.min(100,u)),[u]),i=t.useMemo(()=>e/100,[e]),s=t.useMemo(()=>{for(const n of D)if(e>=n)return c[n];return[]},[e]),m=t.useMemo(()=>s.length,[s]),l=t.useMemo(()=>s.at(0),[s]),x=t.useMemo(()=>s.at(-1),[s]),E=t.useMemo(()=>s.map((n,d)=>`${n} ${Math.round(d/m*100)}%`).join(", "),[s,m]);return r.jsxRuntimeExports.jsxs("div",{style:{"--percentage":`${e}%`,"--percentage-factor":i,"--gradient":E,"--start-color":l,"--end-color":x},role:"meter","aria-valuenow":e,"aria-valuemin":0,"aria-valuemax":100,"aria-label":a,className:j.cx("kuma-361702174",o==="small"&&"kuma-3162945807",o==="large"&&"kuma-2977513648"),children:[e>0?r.jsxRuntimeExports.jsx("div",{className:"kuma-707327569"}):null,r.jsxRuntimeExports.jsx("div",{className:"kuma-3185646656",children:r.jsxRuntimeExports.jsx("div",{className:"kuma-257978560"})}),r.jsxRuntimeExports.jsx("div",{className:"kuma-586099934",children:e}),e>0&&e<100?r.jsxRuntimeExports.jsx("div",{className:"kuma-967240013",children:r.jsxRuntimeExports.jsx("div",{className:"kuma-3225063030"})}):null]})}exports.Gauge=k;
@@ -0,0 +1,2 @@
1
+ export { default } from './components/gauge';
2
+ export type { GaugeProperties } from './components/gauge';
package/build/gauge.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./gauge-Y0dT3vhB.js");exports.default=e.Gauge;
@@ -0,0 +1,4 @@
1
+ import { G as f } from "./gauge-DHIuVOGi.mjs";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1,11 @@
1
+ export { default as Atom, defaultAtomElementType } from './components/atom';
2
+ export type { AtomProperties, DefaultAtomElementType } from './components/atom';
3
+ export { default as Box } from './components/box';
4
+ export { default as Flex } from './components/flex';
5
+ export type { FlexProperties } from './components/flex';
6
+ export { default as Text, Heading, Paragraph, Span } from './components/text';
7
+ export { default as Gauge } from './components/gauge';
8
+ export type { GaugeProperties } from './components/gauge';
9
+ export { default as Skeleton, SkeletonInstance } from './components/skeleton';
10
+ export { default as Spinner } from './components/spinner';
11
+ export { default as theme, greenColor, overflowProtectionStyles, buttonResetStyles, } from './theme';
package/build/index.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./atom-B-bW2QKm.js"),r=require("./box-C72tT5hd.js"),l=require("./flex-Czl688kn.js"),e=require("./text-COwGgyWJ.js"),a=require("./gauge-Y0dT3vhB.js"),n=require("./skeleton-BL8lC2O4.js"),s=require("./spinner-DQcSzoeb.js"),t=require("./theme.js");exports.Atom=o.Atom;exports.defaultAtomElementType=o.defaultAtomElementType;exports.Box=r.Box;exports.Flex=l.Flex;exports.Heading=e.Heading;exports.Paragraph=e.Paragraph;exports.Span=e.Span;exports.Text=e.Text;exports.Gauge=a.Gauge;exports.Skeleton=n.Skeleton;exports.SkeletonInstance=n.SkeletonInstance;exports.Spinner=s.Spinner;exports.buttonResetStyles=t.buttonResetStyles;exports.greenColor=t.greenColor;exports.overflowProtectionStyles=t.overflowProtectionStyles;exports.theme=t.default;
@@ -0,0 +1,26 @@
1
+ import { A as t, d as a } from "./atom-CqxGy6PS.mjs";
2
+ import { B as s } from "./box-DQbqyewI.mjs";
3
+ import { F as n } from "./flex-a_d7XX18.mjs";
4
+ import { H as f, P as x, S as l, T as S } from "./text-B_B-fHoN.mjs";
5
+ import { G as g } from "./gauge-DHIuVOGi.mjs";
6
+ import { S as i, a as y } from "./skeleton-CWUXsrG6.mjs";
7
+ import { S as P } from "./spinner-Bal8iQ21.mjs";
8
+ import { buttonResetStyles as c, greenColor as h, overflowProtectionStyles as k, default as B } from "./theme.mjs";
9
+ export {
10
+ t as Atom,
11
+ s as Box,
12
+ n as Flex,
13
+ g as Gauge,
14
+ f as Heading,
15
+ x as Paragraph,
16
+ i as Skeleton,
17
+ y as SkeletonInstance,
18
+ l as Span,
19
+ P as Spinner,
20
+ S as Text,
21
+ c as buttonResetStyles,
22
+ a as defaultAtomElementType,
23
+ h as greenColor,
24
+ k as overflowProtectionStyles,
25
+ B as theme
26
+ };
@@ -0,0 +1,282 @@
1
+ import K from "react";
2
+ var v = { exports: {} }, m = {};
3
+ /**
4
+ * @license React
5
+ * react-jsx-runtime.production.js
6
+ *
7
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
8
+ *
9
+ * This source code is licensed under the MIT license found in the
10
+ * LICENSE file in the root directory of this source tree.
11
+ */
12
+ var $;
13
+ function ee() {
14
+ if ($) return m;
15
+ $ = 1;
16
+ var u = Symbol.for("react.transitional.element"), E = Symbol.for("react.fragment");
17
+ function c(i, o, s) {
18
+ var f = null;
19
+ if (s !== void 0 && (f = "" + s), o.key !== void 0 && (f = "" + o.key), "key" in o) {
20
+ s = {};
21
+ for (var d in o)
22
+ d !== "key" && (s[d] = o[d]);
23
+ } else s = o;
24
+ return o = s.ref, {
25
+ $$typeof: u,
26
+ type: i,
27
+ key: f,
28
+ ref: o !== void 0 ? o : null,
29
+ props: s
30
+ };
31
+ }
32
+ return m.Fragment = E, m.jsx = c, m.jsxs = c, m;
33
+ }
34
+ var _ = {};
35
+ /**
36
+ * @license React
37
+ * react-jsx-runtime.development.js
38
+ *
39
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
40
+ *
41
+ * This source code is licensed under the MIT license found in the
42
+ * LICENSE file in the root directory of this source tree.
43
+ */
44
+ var I;
45
+ function re() {
46
+ return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
47
+ function u(e) {
48
+ if (e == null) return null;
49
+ if (typeof e == "function")
50
+ return e.$$typeof === H ? null : e.displayName || e.name || null;
51
+ if (typeof e == "string") return e;
52
+ switch (e) {
53
+ case p:
54
+ return "Fragment";
55
+ case U:
56
+ return "Profiler";
57
+ case W:
58
+ return "StrictMode";
59
+ case z:
60
+ return "Suspense";
61
+ case G:
62
+ return "SuspenseList";
63
+ case B:
64
+ return "Activity";
65
+ }
66
+ if (typeof e == "object")
67
+ switch (typeof e.tag == "number" && console.error(
68
+ "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
69
+ ), e.$$typeof) {
70
+ case M:
71
+ return "Portal";
72
+ case J:
73
+ return e.displayName || "Context";
74
+ case q:
75
+ return (e._context.displayName || "Context") + ".Consumer";
76
+ case V:
77
+ var r = e.render;
78
+ return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
79
+ case X:
80
+ return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
81
+ case T:
82
+ r = e._payload, e = e._init;
83
+ try {
84
+ return u(e(r));
85
+ } catch {
86
+ }
87
+ }
88
+ return null;
89
+ }
90
+ function E(e) {
91
+ return "" + e;
92
+ }
93
+ function c(e) {
94
+ try {
95
+ E(e);
96
+ var r = !1;
97
+ } catch {
98
+ r = !0;
99
+ }
100
+ if (r) {
101
+ r = console;
102
+ var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
103
+ return t.call(
104
+ r,
105
+ "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
106
+ n
107
+ ), E(e);
108
+ }
109
+ }
110
+ function i(e) {
111
+ if (e === p) return "<>";
112
+ if (typeof e == "object" && e !== null && e.$$typeof === T)
113
+ return "<...>";
114
+ try {
115
+ var r = u(e);
116
+ return r ? "<" + r + ">" : "<...>";
117
+ } catch {
118
+ return "<...>";
119
+ }
120
+ }
121
+ function o() {
122
+ var e = k.A;
123
+ return e === null ? null : e.getOwner();
124
+ }
125
+ function s() {
126
+ return Error("react-stack-top-frame");
127
+ }
128
+ function f(e) {
129
+ if (x.call(e, "key")) {
130
+ var r = Object.getOwnPropertyDescriptor(e, "key").get;
131
+ if (r && r.isReactWarning) return !1;
132
+ }
133
+ return e.key !== void 0;
134
+ }
135
+ function d(e, r) {
136
+ function t() {
137
+ g || (g = !0, console.error(
138
+ "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
139
+ r
140
+ ));
141
+ }
142
+ t.isReactWarning = !0, Object.defineProperty(e, "key", {
143
+ get: t,
144
+ configurable: !0
145
+ });
146
+ }
147
+ function D() {
148
+ var e = u(this.type);
149
+ return h[e] || (h[e] = !0, console.error(
150
+ "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
151
+ )), e = this.props.ref, e !== void 0 ? e : null;
152
+ }
153
+ function L(e, r, t, n, b, A) {
154
+ var a = t.ref;
155
+ return e = {
156
+ $$typeof: j,
157
+ type: e,
158
+ key: r,
159
+ props: t,
160
+ _owner: n
161
+ }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
162
+ enumerable: !1,
163
+ get: D
164
+ }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
165
+ configurable: !1,
166
+ enumerable: !1,
167
+ writable: !0,
168
+ value: 0
169
+ }), Object.defineProperty(e, "_debugInfo", {
170
+ configurable: !1,
171
+ enumerable: !1,
172
+ writable: !0,
173
+ value: null
174
+ }), Object.defineProperty(e, "_debugStack", {
175
+ configurable: !1,
176
+ enumerable: !1,
177
+ writable: !0,
178
+ value: b
179
+ }), Object.defineProperty(e, "_debugTask", {
180
+ configurable: !1,
181
+ enumerable: !1,
182
+ writable: !0,
183
+ value: A
184
+ }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
185
+ }
186
+ function P(e, r, t, n, b, A) {
187
+ var a = r.children;
188
+ if (a !== void 0)
189
+ if (n)
190
+ if (Z(a)) {
191
+ for (n = 0; n < a.length; n++)
192
+ w(a[n]);
193
+ Object.freeze && Object.freeze(a);
194
+ } else
195
+ console.error(
196
+ "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
197
+ );
198
+ else w(a);
199
+ if (x.call(r, "key")) {
200
+ a = u(e);
201
+ var l = Object.keys(r).filter(function(Q) {
202
+ return Q !== "key";
203
+ });
204
+ n = 0 < l.length ? "{key: someKey, " + l.join(": ..., ") + ": ...}" : "{key: someKey}", Y[a + n] || (l = 0 < l.length ? "{" + l.join(": ..., ") + ": ...}" : "{}", console.error(
205
+ `A props object containing a "key" prop is being spread into JSX:
206
+ let props = %s;
207
+ <%s {...props} />
208
+ React keys must be passed directly to JSX without using spread:
209
+ let props = %s;
210
+ <%s key={someKey} {...props} />`,
211
+ n,
212
+ a,
213
+ l,
214
+ a
215
+ ), Y[a + n] = !0);
216
+ }
217
+ if (a = null, t !== void 0 && (c(t), a = "" + t), f(r) && (c(r.key), a = "" + r.key), "key" in r) {
218
+ t = {};
219
+ for (var S in r)
220
+ S !== "key" && (t[S] = r[S]);
221
+ } else t = r;
222
+ return a && d(
223
+ t,
224
+ typeof e == "function" ? e.displayName || e.name || "Unknown" : e
225
+ ), L(
226
+ e,
227
+ a,
228
+ t,
229
+ o(),
230
+ b,
231
+ A
232
+ );
233
+ }
234
+ function w(e) {
235
+ y(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? y(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
236
+ }
237
+ function y(e) {
238
+ return typeof e == "object" && e !== null && e.$$typeof === j;
239
+ }
240
+ var R = K, j = Symbol.for("react.transitional.element"), M = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), W = Symbol.for("react.strict_mode"), U = Symbol.for("react.profiler"), q = Symbol.for("react.consumer"), J = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), G = Symbol.for("react.suspense_list"), X = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), H = Symbol.for("react.client.reference"), k = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, Z = Array.isArray, O = console.createTask ? console.createTask : function() {
241
+ return null;
242
+ };
243
+ R = {
244
+ react_stack_bottom_frame: function(e) {
245
+ return e();
246
+ }
247
+ };
248
+ var g, h = {}, N = R.react_stack_bottom_frame.bind(
249
+ R,
250
+ s
251
+ )(), C = O(i(s)), Y = {};
252
+ _.Fragment = p, _.jsx = function(e, r, t) {
253
+ var n = 1e4 > k.recentlyCreatedOwnerStacks++;
254
+ return P(
255
+ e,
256
+ r,
257
+ t,
258
+ !1,
259
+ n ? Error("react-stack-top-frame") : N,
260
+ n ? O(i(e)) : C
261
+ );
262
+ }, _.jsxs = function(e, r, t) {
263
+ var n = 1e4 > k.recentlyCreatedOwnerStacks++;
264
+ return P(
265
+ e,
266
+ r,
267
+ t,
268
+ !0,
269
+ n ? Error("react-stack-top-frame") : N,
270
+ n ? O(i(e)) : C
271
+ );
272
+ };
273
+ })()), _;
274
+ }
275
+ var F;
276
+ function te() {
277
+ return F || (F = 1, process.env.NODE_ENV === "production" ? v.exports = ee() : v.exports = re()), v.exports;
278
+ }
279
+ var ae = te();
280
+ export {
281
+ ae as j
282
+ };
@@ -0,0 +1,22 @@
1
+ "use strict";const K=require("react");var v={exports:{}},m={};/**
2
+ * @license React
3
+ * react-jsx-runtime.production.js
4
+ *
5
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */var $;function ee(){if($)return m;$=1;var u=Symbol.for("react.transitional.element"),_=Symbol.for("react.fragment");function c(i,o,s){var f=null;if(s!==void 0&&(f=""+s),o.key!==void 0&&(f=""+o.key),"key"in o){s={};for(var d in o)d!=="key"&&(s[d]=o[d])}else s=o;return o=s.ref,{$$typeof:u,type:i,key:f,ref:o!==void 0?o:null,props:s}}return m.Fragment=_,m.jsx=c,m.jsxs=c,m}var E={};/**
10
+ * @license React
11
+ * react-jsx-runtime.development.js
12
+ *
13
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
14
+ *
15
+ * This source code is licensed under the MIT license found in the
16
+ * LICENSE file in the root directory of this source tree.
17
+ */var I;function re(){return I||(I=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===H?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case p:return"Fragment";case U:return"Profiler";case W:return"StrictMode";case z:return"Suspense";case G:return"SuspenseList";case B:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case M:return"Portal";case J:return e.displayName||"Context";case q:return(e._context.displayName||"Context")+".Consumer";case V:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case X:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case T:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function _(e){return""+e}function c(e){try{_(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),_(e)}}function i(e){if(e===p)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===T)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=k.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function f(e){if(j.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function d(e,r){function t(){g||(g=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function D(){var e=u(this.type);return h[e]||(h[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function L(e,r,t,n,b,A){var a=t.ref;return e={$$typeof:y,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:D}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:b}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function P(e,r,t,n,b,A){var a=r.children;if(a!==void 0)if(n)if(Z(a)){for(n=0;n<a.length;n++)w(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(a);if(j.call(r,"key")){a=u(e);var l=Object.keys(r).filter(function(Q){return Q!=="key"});n=0<l.length?"{key: someKey, "+l.join(": ..., ")+": ...}":"{key: someKey}",Y[a+n]||(l=0<l.length?"{"+l.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
18
+ let props = %s;
19
+ <%s {...props} />
20
+ React keys must be passed directly to JSX without using spread:
21
+ let props = %s;
22
+ <%s key={someKey} {...props} />`,n,a,l,a),Y[a+n]=!0)}if(a=null,t!==void 0&&(c(t),a=""+t),f(r)&&(c(r.key),a=""+r.key),"key"in r){t={};for(var S in r)S!=="key"&&(t[S]=r[S])}else t=r;return a&&d(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),L(e,a,t,o(),b,A)}function w(e){x(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===T&&(e._payload.status==="fulfilled"?x(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function x(e){return typeof e=="object"&&e!==null&&e.$$typeof===y}var R=K,y=Symbol.for("react.transitional.element"),M=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),U=Symbol.for("react.profiler"),q=Symbol.for("react.consumer"),J=Symbol.for("react.context"),V=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),G=Symbol.for("react.suspense_list"),X=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),B=Symbol.for("react.activity"),H=Symbol.for("react.client.reference"),k=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,Z=Array.isArray,O=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var g,h={},N=R.react_stack_bottom_frame.bind(R,s)(),C=O(i(s)),Y={};E.Fragment=p,E.jsx=function(e,r,t){var n=1e4>k.recentlyCreatedOwnerStacks++;return P(e,r,t,!1,n?Error("react-stack-top-frame"):N,n?O(i(e)):C)},E.jsxs=function(e,r,t){var n=1e4>k.recentlyCreatedOwnerStacks++;return P(e,r,t,!0,n?Error("react-stack-top-frame"):N,n?O(i(e)):C)}})()),E}var F;function te(){return F||(F=1,process.env.NODE_ENV==="production"?v.exports=ee():v.exports=re()),v.exports}var ne=te();exports.jsxRuntimeExports=ne;
@@ -0,0 +1 @@
1
+ "use strict";const e=require("./jsx-runtime-BB_1_6y_.js"),c=require("react"),m=require("@kuma-ui/core");function u({width:t,height:s,className:o,children:r,isAnimated:n=!0,...x}){return e.jsxRuntimeExports.jsx("span",{...x,"aria-busy":!0,"aria-role":"progressbar",className:m.cx("kuma-3027005914",n&&"kuma-3311350973",o),style:{width:t,height:s},children:r??e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:" "})})}const i="kuma-3140855657";function a({lines:t=1,isAnimated:s=!0}){const o=c.useMemo(()=>{const r=[];if(t<=1)return r;for(let n=1;n<t;n+=1)r.push(e.jsxRuntimeExports.jsx(u,{width:"100%",height:"1em",isAnimated:s,className:i},n));return r},[t,s]);return t<1?null:t===1?e.jsxRuntimeExports.jsx(u,{width:"100%",height:"1em",isAnimated:s,className:i}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[o,e.jsxRuntimeExports.jsx(u,{width:"60%",height:"1em",isAnimated:s,className:i})]})}exports.Skeleton=a;exports.SkeletonInstance=u;
@@ -0,0 +1,48 @@
1
+ import { j as e } from "./jsx-runtime-B4hRZ52C.mjs";
2
+ import { useMemo as l } from "react";
3
+ import { cx as c } from "@kuma-ui/core";
4
+ function o({
5
+ width: t,
6
+ height: r,
7
+ className: n,
8
+ children: s,
9
+ isAnimated: a = !0,
10
+ ...m
11
+ }) {
12
+ return /* @__PURE__ */ e.jsx(
13
+ "span",
14
+ {
15
+ ...m,
16
+ "aria-busy": !0,
17
+ "aria-role": "progressbar",
18
+ className: c("kuma-3027005914", a && "kuma-3311350973", n),
19
+ style: {
20
+ width: t,
21
+ height: r
22
+ },
23
+ children: s ?? /* @__PURE__ */ e.jsx(e.Fragment, { children: " " })
24
+ }
25
+ );
26
+ }
27
+ const u = "kuma-3140855657";
28
+ function f({
29
+ lines: t = 1,
30
+ isAnimated: r = !0
31
+ }) {
32
+ const n = l(() => {
33
+ const s = [];
34
+ if (t <= 1)
35
+ return s;
36
+ for (let a = 1; a < t; a += 1)
37
+ s.push(/* @__PURE__ */ e.jsx(o, { width: "100%", height: "1em", isAnimated: r, className: u }, a));
38
+ return s;
39
+ }, [t, r]);
40
+ return t < 1 ? null : t === 1 ? /* @__PURE__ */ e.jsx(o, { width: "100%", height: "1em", isAnimated: r, className: u }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
41
+ n,
42
+ /* @__PURE__ */ e.jsx(o, { width: "60%", height: "1em", isAnimated: r, className: u })
43
+ ] });
44
+ }
45
+ export {
46
+ f as S,
47
+ o as a
48
+ };
@@ -0,0 +1 @@
1
+ export { default, SkeletonInstance } from './components/skeleton';
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./skeleton-BL8lC2O4.js");exports.SkeletonInstance=e.SkeletonInstance;exports.default=e.Skeleton;
@@ -0,0 +1,5 @@
1
+ import { a as t, S as n } from "./skeleton-CWUXsrG6.mjs";
2
+ export {
3
+ t as SkeletonInstance,
4
+ n as default
5
+ };
@@ -0,0 +1,14 @@
1
+ import { j as m } from "./jsx-runtime-B4hRZ52C.mjs";
2
+ import { useMemo as o } from "react";
3
+ import { cx as x } from "@kuma-ui/core";
4
+ function l({
5
+ size: r = 18,
6
+ strokeWidth: s = 2.5,
7
+ isAnimated: f = !0
8
+ }) {
9
+ const t = o(() => r / 2, [r]), c = o(() => t - s / 2, [s, t]), e = o(() => 2 * Math.PI * c, [c]), n = o(() => e * 0.33, [e]), a = o(() => e - n, [e, n]), u = o(() => -a / 2, [a]);
10
+ return /* @__PURE__ */ m.jsx("svg", { width: r, height: r, preserveAspectRatio: "xMaxYMax meet", viewBox: `0 0 ${r} ${r}`, fill: "none", className: x("kuma-2940817552", f && "kuma-2073235239"), children: /* @__PURE__ */ m.jsx("circle", { cx: t, cy: t, r: c, stroke: "currentColor", strokeWidth: s, strokeLinecap: "round", strokeDasharray: `${a} ${n}`, strokeDashoffset: u }) });
11
+ }
12
+ export {
13
+ l as S
14
+ };
@@ -0,0 +1 @@
1
+ "use strict";const a=require("./jsx-runtime-BB_1_6y_.js"),s=require("react"),x=require("@kuma-ui/core");function f({size:e=18,strokeWidth:o=2.5,isAnimated:i=!0}){const r=s.useMemo(()=>e/2,[e]),n=s.useMemo(()=>r-o/2,[o,r]),t=s.useMemo(()=>2*Math.PI*n,[n]),c=s.useMemo(()=>t*.33,[t]),u=s.useMemo(()=>t-c,[t,c]),m=s.useMemo(()=>-u/2,[u]);return a.jsxRuntimeExports.jsx("svg",{width:e,height:e,preserveAspectRatio:"xMaxYMax meet",viewBox:`0 0 ${e} ${e}`,fill:"none",className:x.cx("kuma-2940817552",i&&"kuma-2073235239"),children:a.jsxRuntimeExports.jsx("circle",{cx:r,cy:r,r:n,stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeDasharray:`${u} ${c}`,strokeDashoffset:m})})}exports.Spinner=f;
@@ -0,0 +1 @@
1
+ export { default } from './components/spinner';
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./spinner-DQcSzoeb.js");exports.default=e.Spinner;
@@ -0,0 +1,4 @@
1
+ import { S as f } from "./spinner-Bal8iQ21.mjs";
2
+ export {
3
+ f as default
4
+ };
@@ -0,0 +1,39 @@
1
+ import { j as t } from "./jsx-runtime-B4hRZ52C.mjs";
2
+ import { cx as o } from "@kuma-ui/core";
3
+ import { overflowProtectionStyles as e } from "./theme.mjs";
4
+ import { A as n } from "./atom-CqxGy6PS.mjs";
5
+ function f({
6
+ as: a,
7
+ className: s,
8
+ ...r
9
+ }) {
10
+ return /* @__PURE__ */ t.jsx(n, { as: a ?? "h1", ...r, className: o(e, "kuma-2934642132", s) });
11
+ }
12
+ const m = "kuma-1010422083";
13
+ function x({
14
+ as: a,
15
+ className: s,
16
+ ...r
17
+ }) {
18
+ return /* @__PURE__ */ t.jsx(n, { as: a ?? "p", ...r, className: o(m, "kuma-2351087175", s) });
19
+ }
20
+ function l({
21
+ as: a,
22
+ className: s,
23
+ ...r
24
+ }) {
25
+ return /* @__PURE__ */ t.jsx(n, { as: a ?? "span", ...r, className: o(m, s) });
26
+ }
27
+ function j({
28
+ as: a,
29
+ className: s,
30
+ ...r
31
+ }) {
32
+ return /* @__PURE__ */ t.jsx(n, { as: a ?? "div", ...r, className: o("kuma-2608978433", s) });
33
+ }
34
+ export {
35
+ f as H,
36
+ x as P,
37
+ l as S,
38
+ j as T
39
+ };
@@ -0,0 +1 @@
1
+ "use strict";const a=require("./jsx-runtime-BB_1_6y_.js"),n=require("@kuma-ui/core"),u=require("./theme.js"),r=require("./atom-B-bW2QKm.js");function c({as:s,className:t,...e}){return a.jsxRuntimeExports.jsx(r.Atom,{as:s??"h1",...e,className:n.cx(u.overflowProtectionStyles,"kuma-2934642132",t)})}const o="kuma-1010422083";function m({as:s,className:t,...e}){return a.jsxRuntimeExports.jsx(r.Atom,{as:s??"p",...e,className:n.cx(o,"kuma-2351087175",t)})}function x({as:s,className:t,...e}){return a.jsxRuntimeExports.jsx(r.Atom,{as:s??"span",...e,className:n.cx(o,t)})}function i({as:s,className:t,...e}){return a.jsxRuntimeExports.jsx(r.Atom,{as:s??"div",...e,className:n.cx("kuma-2608978433",t)})}exports.Heading=c;exports.Paragraph=m;exports.Span=x;exports.Text=i;
@@ -0,0 +1 @@
1
+ export { Heading, Paragraph, Span, default as Text } from './components/text';
package/build/text.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-COwGgyWJ.js");exports.Heading=e.Heading;exports.Paragraph=e.Paragraph;exports.Span=e.Span;exports.Text=e.Text;
package/build/text.mjs ADDED
@@ -0,0 +1,7 @@
1
+ import { H as s, P as e, S as p, T as g } from "./text-B_B-fHoN.mjs";
2
+ export {
3
+ s as Heading,
4
+ e as Paragraph,
5
+ p as Span,
6
+ g as Text
7
+ };
@@ -0,0 +1,16 @@
1
+ export declare const greenColor = "#4ca486";
2
+ export declare const font: {
3
+ family: string;
4
+ stylesheet: string;
5
+ preconnect: ({
6
+ url: string;
7
+ crossorigin?: undefined;
8
+ } | {
9
+ url: string;
10
+ crossorigin: boolean;
11
+ })[];
12
+ };
13
+ declare const theme: string;
14
+ export default theme;
15
+ export declare const overflowProtectionStyles: string;
16
+ export declare const buttonResetStyles: string;
package/build/theme.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="#4ca486",e={family:"DM Sans, sans-serif",stylesheet:"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap",preconnect:[{url:"https://fonts.googleapis.com"},{url:"https://fonts.gstatic.com",crossorigin:!0}]},o="kuma-3997436555",s="kuma-4178476647",n="kuma-216224454";exports.buttonResetStyles=n;exports.default=o;exports.font=e;exports.greenColor=t;exports.overflowProtectionStyles=s;
@@ -0,0 +1,17 @@
1
+ const t = "#4ca486", s = {
2
+ family: "DM Sans, sans-serif",
3
+ stylesheet: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap",
4
+ preconnect: [{
5
+ url: "https://fonts.googleapis.com"
6
+ }, {
7
+ url: "https://fonts.gstatic.com",
8
+ crossorigin: !0
9
+ }]
10
+ }, o = "kuma-3997436555", e = "kuma-4178476647", n = "kuma-216224454";
11
+ export {
12
+ n as buttonResetStyles,
13
+ o as default,
14
+ s as font,
15
+ t as greenColor,
16
+ e as overflowProtectionStyles
17
+ };
package/package.json ADDED
@@ -0,0 +1,190 @@
1
+ {
2
+ "name": "@kakadu/components",
3
+ "version": "0.1.0",
4
+ "description": "React components built with Kuma UI",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/kakadu/components.git"
9
+ },
10
+ "keywords": [
11
+ "react",
12
+ "components",
13
+ "kuma-ui",
14
+ "ui",
15
+ "design-system"
16
+ ],
17
+ "main": "./build/index.js",
18
+ "module": "./build/index.mjs",
19
+ "types": "./build/index.d.ts",
20
+ "scripts": {
21
+ "dev": "next dev",
22
+ "build": "rm -rf build && vite build && tsc --project tsconfig.build.json --emitDeclarationOnly --outDir build",
23
+ "build:next": "next build",
24
+ "start": "next start",
25
+ "storybook": "storybook dev -p 6006 --no-open",
26
+ "build-storybook": "storybook build",
27
+ "fix": "xo --fix --prettier",
28
+ "format": "prettier --write .",
29
+ "lint": "tsc --noEmit && xo --prettier",
30
+ "prepublishOnly": "npm run build"
31
+ },
32
+ "exports": {
33
+ ".": {
34
+ "types": "./build/index.d.ts",
35
+ "import": "./build/index.mjs",
36
+ "require": "./build/index.js"
37
+ },
38
+ "./atom": {
39
+ "types": "./build/atom.d.ts",
40
+ "import": "./build/atom.mjs",
41
+ "require": "./build/atom.js"
42
+ },
43
+ "./box": {
44
+ "types": "./build/box.d.ts",
45
+ "import": "./build/box.mjs",
46
+ "require": "./build/box.js"
47
+ },
48
+ "./flex": {
49
+ "types": "./build/flex.d.ts",
50
+ "import": "./build/flex.mjs",
51
+ "require": "./build/flex.js"
52
+ },
53
+ "./text": {
54
+ "types": "./build/text.d.ts",
55
+ "import": "./build/text.mjs",
56
+ "require": "./build/text.js"
57
+ },
58
+ "./gauge": {
59
+ "types": "./build/gauge.d.ts",
60
+ "import": "./build/gauge.mjs",
61
+ "require": "./build/gauge.js"
62
+ },
63
+ "./skeleton": {
64
+ "types": "./build/skeleton.d.ts",
65
+ "import": "./build/skeleton.mjs",
66
+ "require": "./build/skeleton.js"
67
+ },
68
+ "./spinner": {
69
+ "types": "./build/spinner.d.ts",
70
+ "import": "./build/spinner.mjs",
71
+ "require": "./build/spinner.js"
72
+ },
73
+ "./theme": {
74
+ "types": "./build/theme.d.ts",
75
+ "import": "./build/theme.mjs",
76
+ "require": "./build/theme.js"
77
+ },
78
+ "./theme.tsx": {
79
+ "types": "./build/theme.d.ts",
80
+ "import": "./build/theme.mjs",
81
+ "require": "./build/theme.js"
82
+ },
83
+ "./components.css": "./build/components.css"
84
+ },
85
+ "files": [
86
+ "build",
87
+ "theme.tsx"
88
+ ],
89
+ "publishConfig": {
90
+ "access": "public"
91
+ },
92
+ "sideEffects": [
93
+ "**/*.css"
94
+ ],
95
+ "peerDependencies": {
96
+ "@kuma-ui/core": "^1.5.9",
97
+ "react": "^19.0.0",
98
+ "react-dom": "^19.0.0"
99
+ },
100
+ "dependencies": {
101
+ "@kuma-ui/vite": "^1.4.0",
102
+ "next": "^16.0.1"
103
+ },
104
+ "devDependencies": {
105
+ "@chromatic-com/storybook": "^4.1.2",
106
+ "@kuma-ui/core": "^1.5.9",
107
+ "@storybook/addon-a11y": "^10.0.0",
108
+ "@storybook/addon-docs": "^10.0.0",
109
+ "@storybook/addon-onboarding": "^10.0.0",
110
+ "@storybook/addon-vitest": "^10.0.0",
111
+ "@storybook/nextjs-vite": "^10.0.0",
112
+ "@types/node": "^20",
113
+ "@types/react": "^19",
114
+ "@types/react-dom": "^19",
115
+ "@vitejs/plugin-react": "^5.1.0",
116
+ "@vitest/browser-playwright": "^4.0.4",
117
+ "@vitest/coverage-v8": "^4.0.4",
118
+ "eslint-config-xo-react": "^0.27.0",
119
+ "eslint-plugin-storybook": "^10.0.0",
120
+ "playwright": "^1.56.1",
121
+ "prettier": "^3.6.2",
122
+ "react": "^19.2.0",
123
+ "react-dom": "^19.2.0",
124
+ "storybook": "^10.0.0",
125
+ "typescript": "^5",
126
+ "vite": "^6.0.0",
127
+ "vitest": "^4.0.4",
128
+ "xo": "^0.59.3"
129
+ },
130
+ "overrides": {
131
+ "react": "^19.2.0",
132
+ "react-dom": "^19.2.0",
133
+ "@types/react": "^19",
134
+ "@types/react-dom": "^19"
135
+ },
136
+ "xo": {
137
+ "extends": [
138
+ "xo-react"
139
+ ],
140
+ "rules": {
141
+ "unicorn/expiring-todo-comments": 0,
142
+ "unicorn/prefer-top-level-await": 0,
143
+ "import/extensions": 0,
144
+ "n/prefer-global/process": 0,
145
+ "n/file-extension-in-import": 0,
146
+ "react/boolean-prop-naming": [
147
+ "error",
148
+ {
149
+ "rule": "^(is|has|show|hide|should)[A-Z]([A-Za-z0-9]?)+"
150
+ }
151
+ ]
152
+ },
153
+ "overrides": [
154
+ {
155
+ "files": [
156
+ "**/*.{ts,tsx}"
157
+ ],
158
+ "rules": {
159
+ "@typescript-eslint/no-unused-vars": 2,
160
+ "@typescript-eslint/no-unsafe-argument": 1,
161
+ "@typescript-eslint/no-unsafe-assignment": 1,
162
+ "@typescript-eslint/no-unsafe-call": 1,
163
+ "@typescript-eslint/triple-slash-reference": 0,
164
+ "@typescript-eslint/consistent-type-assertions": 0
165
+ }
166
+ },
167
+ {
168
+ "files": [
169
+ "recorder/manifest.ts"
170
+ ],
171
+ "rules": {
172
+ "@typescript-eslint/naming-convention": 0
173
+ }
174
+ },
175
+ {
176
+ "files": [
177
+ "jest.config.js"
178
+ ],
179
+ "rules": {
180
+ "unicorn/prefer-module": 0
181
+ }
182
+ }
183
+ ],
184
+ "ignore": [
185
+ ".vercel/",
186
+ "build/",
187
+ "public/**/*.js"
188
+ ]
189
+ }
190
+ }
package/readme.md ADDED
@@ -0,0 +1,9 @@
1
+ # Kakadu Components
2
+
3
+ ## Storybook
4
+
5
+ Run Storybook with this command, and then visit the library at `http://localhost:6006`:
6
+
7
+ ```
8
+ npm run storybook
9
+ ```
package/theme.tsx ADDED
@@ -0,0 +1,130 @@
1
+ import {css} from '@kuma-ui/core';
2
+
3
+ export const greenColor = '#4ca486';
4
+
5
+ export const font = {
6
+ family: 'DM Sans, sans-serif',
7
+ stylesheet:
8
+ 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap',
9
+ preconnect: [
10
+ {url: 'https://fonts.googleapis.com'},
11
+ {url: 'https://fonts.gstatic.com', crossorigin: true},
12
+ ],
13
+ };
14
+
15
+ const theme = css`
16
+ --background-color: #fafcff;
17
+ --foreground-color: #000;
18
+
19
+ --blue-color: #2f455d;
20
+ --blue-dark-color: #32445b;
21
+ --blue-hover-color: #345882;
22
+ --blue-light-color: #b3c0d4;
23
+ --blue-pale-color: #e1efff;
24
+
25
+ --green-color: #4ca486;
26
+ --green-pale-color: #dceeec;
27
+ --green-dark-color: #3c6957;
28
+ --grey-color: #c6c6c6;
29
+ --grey-pale-color: #dfdfdf;
30
+ --red-color: #ff4d4d;
31
+ --red-pale-color: #ffe5e5;
32
+ --red-pale-hover-color: #ffd6d6;
33
+ --yellow-color: #f5c235;
34
+ --yellow-dark-color: #9f7605;
35
+
36
+ --flash-color: rgba(255, 216, 57, 0.5);
37
+ --font-weight-modifier: 50;
38
+
39
+ :where([data-theme='dark']) {
40
+ --font-weight-modifier: 0;
41
+ }
42
+
43
+ --accent-font-family: 'Frank Ruhl Libre', serif;
44
+ --font-family: 'Inter', -apple-system, helvetica, arial, sans-serif;
45
+
46
+ --gap: 16px;
47
+
48
+ --quarter-gap: calc(var(--gap) / 4);
49
+ --third-gap: calc(var(--gap) / 3);
50
+ --half-gap: calc(var(--gap) / 2);
51
+ --sesquialteral-gap: calc(var(--gap) * 1.5);
52
+ --double-gap: calc(var(--gap) * 2);
53
+ --triple-gap: calc(var(--gap) * 3);
54
+ --quadruple-gap: calc(var(--gap) * 4);
55
+
56
+ --sidebar-z-index: 424242;
57
+ --modal-z-index: 424243;
58
+
59
+ font-family: var(--font-family);
60
+ font-optical-sizing: auto;
61
+ line-height: normal;
62
+ color: var(--foreground-color);
63
+
64
+ --8px: 0.5rem;
65
+ --9px: 0.5625rem;
66
+ --10px: 0.625rem;
67
+ --11px: 0.6875rem;
68
+ --12px: 0.75rem;
69
+ --13px: 0.8125rem;
70
+ --14px: 0.875rem;
71
+ --15px: 0.9375rem;
72
+ --16px: 1rem;
73
+
74
+ --17px: 1.0625rem;
75
+ --18px: 1.125rem;
76
+ --19px: 1.1875rem;
77
+ --20px: 1.25rem;
78
+ --21px: 1.3125rem;
79
+ --22px: 1.375rem;
80
+ --23px: 1.4375rem;
81
+ --24px: 1.5rem;
82
+
83
+ --25px: 1.5625rem;
84
+ --26px: 1.625rem;
85
+ --27px: 1.6875rem;
86
+ --28px: 1.75rem;
87
+ --29px: 1.8125rem;
88
+ --30px: 1.875rem;
89
+ --31px: 1.9375rem;
90
+ --32px: 2rem;
91
+
92
+ --33px: 2.0625rem;
93
+ --34px: 2.125rem;
94
+ --35px: 2.1875rem;
95
+ --36px: 2.25rem;
96
+ --37px: 2.3125rem;
97
+ --38px: 2.375rem;
98
+ --39px: 2.4375rem;
99
+ --40px: 2.5rem;
100
+
101
+ --41px: 2.5625rem;
102
+ --42px: 2.625rem;
103
+ --43px: 2.6875rem;
104
+ --44px: 2.75rem;
105
+ --45px: 2.8125rem;
106
+ --46px: 2.875rem;
107
+ --47px: 2.9375rem;
108
+ --48px: 3rem;
109
+ `;
110
+
111
+ export default theme;
112
+
113
+ export const overflowProtectionStyles = css`
114
+ overflow-wrap: anywhere;
115
+ hyphens: auto;
116
+ `;
117
+
118
+ export const buttonResetStyles = css`
119
+ appearance: none;
120
+ background: transparent;
121
+ text-align: left;
122
+ border: 0;
123
+ margin: 0;
124
+ padding: 0;
125
+ cursor: pointer;
126
+
127
+ [dir='rtl'] & {
128
+ text-align: right;
129
+ }
130
+ `;