@kakadu/components 0.1.3 → 0.1.4
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.
- package/build/aria-text.d.ts +1 -0
- package/build/box-4_-REPb0.js +1 -0
- package/build/box-Cf22bdCb.mjs +13 -0
- package/build/box.js +1 -1
- package/build/box.mjs +1 -1
- package/build/components/aria-text.d.ts +5 -0
- package/build/components/box.d.ts +3 -3
- package/build/components/spinner.d.ts +7 -2
- package/build/components.css +1 -1
- package/build/flex.d.ts +0 -1
- package/build/gauge.d.ts +0 -1
- package/build/index.d.ts +2 -3
- package/build/index.js +1 -1
- package/build/index.mjs +37 -24
- package/build/spinner-DE_Y3sKH.mjs +33 -0
- package/build/spinner-DFfE6tSd.js +1 -0
- package/build/spinner.d.ts +1 -1
- package/build/spinner.js +1 -1
- package/build/spinner.mjs +2 -1
- package/package.json +14 -2
- package/readme.md +11 -11
- package/build/box-BdUR8k49.js +0 -1
- package/build/box-DmpGO-yx.mjs +0 -13
- package/build/spinner-BWIY_fuB.mjs +0 -14
- package/build/spinner-Ci3vM4Cv.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './components/aria-text';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const n=require("./jsx-runtime-BB_1_6y_.js"),r=require("@kuma-ui/core"),e=require("./atom-B-bW2QKm.js");function u({as:t,className:o,...s}){return n.jsxRuntimeExports.jsx(e.Atom,{as:t??e.defaultAtomElementType,...s,className:r.cx("kakadu-components-1846349723",o)})}exports.Box=u;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { j as s } from "./jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
+
import { cx as a } from "@kuma-ui/core";
|
|
3
|
+
import { A as r, d as e } from "./atom-CqxGy6PS.mjs";
|
|
4
|
+
function f({
|
|
5
|
+
as: o,
|
|
6
|
+
className: t,
|
|
7
|
+
...m
|
|
8
|
+
}) {
|
|
9
|
+
return /* @__PURE__ */ s.jsx(r, { as: o ?? e, ...m, className: a("kakadu-components-1846349723", t) });
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
f as B
|
|
13
|
+
};
|
package/build/box.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./box-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./box-4_-REPb0.js");exports.default=e.Box;
|
package/build/box.mjs
CHANGED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type AtomElementType, type AtomProperties } from './atom';
|
|
2
|
+
export declare const ariaTextStyles: string;
|
|
3
|
+
type AriaTextProperties<Type extends AtomElementType = 'span'> = AtomProperties<Type>;
|
|
4
|
+
export default function AriaText<Type extends AtomElementType = 'span'>({ as, className, ...properties }: AriaTextProperties<Type>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type AtomElementType, type AtomProperties } from './atom';
|
|
2
|
-
type BoxProperties<Type extends AtomElementType =
|
|
3
|
-
export default function Box<Type extends AtomElementType =
|
|
1
|
+
import { type DefaultAtomElementType, type AtomElementType, type AtomProperties } from './atom';
|
|
2
|
+
type BoxProperties<Type extends AtomElementType = DefaultAtomElementType> = AtomProperties<Type>;
|
|
3
|
+
export default function Box<Type extends AtomElementType = DefaultAtomElementType>({ as, className, ...properties }: BoxProperties<Type>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export {};
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
type SpinnerProperties = {
|
|
2
2
|
readonly size?: number;
|
|
3
3
|
readonly strokeWidth?: number;
|
|
4
4
|
readonly isAnimated?: boolean;
|
|
5
|
-
}
|
|
5
|
+
};
|
|
6
|
+
export default function Spinner({ size, strokeWidth, isAnimated, }: SpinnerProperties): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function RevealSpinner({ isVisible, ...properties }: {
|
|
8
|
+
readonly isVisible?: boolean;
|
|
9
|
+
} & Omit<SpinnerProperties, 'isAnimated'>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
package/build/components.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.kakadu-components-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}.kakadu-components-1168981339{display:flex}.kakadu-components-2635417128{flex-direction:column}.kakadu-components-3787355519{align-items:flex-start;justify-content:flex-start}.kakadu-components-2338096059{align-items:center;justify-content:center}.kakadu-components-3146198284{align-items:space-between;justify-content:space-between}.kakadu-components-1431148762{align-items:flex-end;justify-content:flex-end}.kakadu-components-2276234075{gap:var(--quarter-gap)}.kakadu-components-739568937{gap:var(--third-gap)}.kakadu-components-3438335458{gap:var(--half-gap)}.kakadu-components-3993051137{gap:var(--gap)}.kakadu-components-4186556816{gap:var(--sesquialteral-gap)}.kakadu-components-1435205015{gap:var(--double-gap)}.kakadu-components-417269694{--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:"Inter",-apple-system,helvetica,arial,sans-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}.kakadu-components-417269694 :where([data-theme=dark]){--font-weight-modifier:0}.kakadu-components-4178476647{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.kakadu-components-216224454{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;text-align:left;border:0;margin:0;padding:0;cursor:pointer}[dir=rtl] .kakadu-components-216224454{text-align:right}.kakadu-components-2934642132{font-family:var(--accent-font-family);font-size:var(--37px);font-weight:650;padding:0;margin:0}.kakadu-components-1010422083{font-family:var(--font-family);font-size:var(--16px)}.kakadu-components-1010422083 b{font-weight:500}.kakadu-components-1010422083 strong{font-weight:600}.kakadu-components-1010422083 a{color:var(--green-dark-color);text-decoration:underline}@media(hover:hover){.kakadu-components-1010422083 a:hover{text-decoration:none}}.kakadu-components-2351087175{font-size:var(--18px);font-weight:425;line-height:1.5em;padding:0;margin:0}.kakadu-components-2351087175 ol{margin:0;margin-top:var(--gap);padding:0;list-style-position:inside}.kakadu-components-2351087175 li::marker{font-weight:600}.kakadu-components-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}.kakadu-components-2608978433{max-width:720px;text-wrap:pretty}.kakadu-components-2608978433 h1:has(+p:last-child){font-size:var(--32px)}.kakadu-components-2608978433 h1+:is(p,ul){margin-top:.75em}.kakadu-components-2608978433 h1+:is(p,ul):last-child{margin-top:.25em}.kakadu-components-2608978433 h1+p:has(+p){font-size:var(--22px);font-weight:275;line-height:1.3em;opacity:.75}.kakadu-components-2608978433 h1+p:has(+p)+p{margin-top:1.25em}.kakadu-components-2608978433 p+:is(p){margin-top:.75em}.kakadu-components-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}.kakadu-components-3162945807{--size:60px;--thickness:11px;--font-size:var(--18px);--font-weight:600;--offset:2px}.kakadu-components-2977513648{--size:100px;--thickness:17px;--font-size:var(--32px);--offset:3px}.kakadu-components-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}.kakadu-components-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)}.kakadu-components-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%)}.kakadu-components-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}.kakadu-components-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}.kakadu-components-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)}.kakadu-components-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%}}.kakadu-components-3311350973{--opacity:.3}.kakadu-components-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)}.kakadu-components-3140855657{vertical-align:middle}.kakadu-components-2940817552{display:inline-block;vertical-align:top}.kakadu-components-2073235239{animation:loading-spinner .97s linear infinite}@keyframes loading-spinner{0%{transform:rotate(0)}to{transform:rotate(359.999deg)}}
|
|
1
|
+
.kakadu-components-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}.kakadu-components-1168981339{display:flex}.kakadu-components-2635417128{flex-direction:column}.kakadu-components-3787355519{align-items:flex-start;justify-content:flex-start}.kakadu-components-2338096059{align-items:center;justify-content:center}.kakadu-components-3146198284{align-items:space-between;justify-content:space-between}.kakadu-components-1431148762{align-items:flex-end;justify-content:flex-end}.kakadu-components-2276234075{gap:var(--quarter-gap)}.kakadu-components-739568937{gap:var(--third-gap)}.kakadu-components-3438335458{gap:var(--half-gap)}.kakadu-components-3993051137{gap:var(--gap)}.kakadu-components-4186556816{gap:var(--sesquialteral-gap)}.kakadu-components-1435205015{gap:var(--double-gap)}.kakadu-components-417269694{--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:"Inter",-apple-system,helvetica,arial,sans-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}.kakadu-components-417269694 :where([data-theme=dark]){--font-weight-modifier:0}.kakadu-components-4178476647{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.kakadu-components-216224454{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;text-align:left;border:0;margin:0;padding:0;cursor:pointer}[dir=rtl] .kakadu-components-216224454{text-align:right}.kakadu-components-2934642132{font-family:var(--accent-font-family);font-size:var(--37px);font-weight:650;padding:0;margin:0}.kakadu-components-1010422083{font-family:var(--font-family);font-size:var(--16px)}.kakadu-components-1010422083 b{font-weight:500}.kakadu-components-1010422083 strong{font-weight:600}.kakadu-components-1010422083 a{color:var(--green-dark-color);text-decoration:underline}@media(hover:hover){.kakadu-components-1010422083 a:hover{text-decoration:none}}.kakadu-components-2351087175{font-size:var(--18px);font-weight:425;line-height:1.5em;padding:0;margin:0}.kakadu-components-2351087175 ol{margin:0;margin-top:var(--gap);padding:0;list-style-position:inside}.kakadu-components-2351087175 li::marker{font-weight:600}.kakadu-components-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}.kakadu-components-2608978433{max-width:720px;text-wrap:pretty}.kakadu-components-2608978433 h1:has(+p:last-child){font-size:var(--32px)}.kakadu-components-2608978433 h1+:is(p,ul){margin-top:.75em}.kakadu-components-2608978433 h1+:is(p,ul):last-child{margin-top:.25em}.kakadu-components-2608978433 h1+p:has(+p){font-size:var(--22px);font-weight:275;line-height:1.3em;opacity:.75}.kakadu-components-2608978433 h1+p:has(+p)+p{margin-top:1.25em}.kakadu-components-2608978433 p+:is(p){margin-top:.75em}.kakadu-components-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}.kakadu-components-3162945807{--size:60px;--thickness:11px;--font-size:var(--18px);--font-weight:600;--offset:2px}.kakadu-components-2977513648{--size:100px;--thickness:17px;--font-size:var(--32px);--offset:3px}.kakadu-components-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}.kakadu-components-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)}.kakadu-components-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%)}.kakadu-components-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}.kakadu-components-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}.kakadu-components-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)}.kakadu-components-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%}}.kakadu-components-3311350973{--opacity:.3}.kakadu-components-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)}.kakadu-components-3140855657{vertical-align:middle}.kakadu-components-2940817552{display:inline-block;vertical-align:top}.kakadu-components-2073235239{animation:loading-spinner .97s linear infinite}@keyframes loading-spinner{0%{transform:rotate(0)}to{transform:rotate(359.999deg)}}.kakadu-components-833895784{opacity:0;transform:scale(.75);transition:transform .16s,opacity .12s}.kakadu-components-640347989{transform:scale(1);opacity:1}.kakadu-components-3440084244{width:1px;height:1px;white-space:nowrap;padding:0;margin:-1px;border:0;position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip:rect(0,0,0,0);word-wrap:normal}
|
package/build/flex.d.ts
CHANGED
package/build/gauge.d.ts
CHANGED
package/build/index.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
export { default as Atom, defaultAtomElementType } from './components/atom';
|
|
2
2
|
export type { AtomProperties, DefaultAtomElementType } from './components/atom';
|
|
3
|
+
export { default as AriaText } from './components/aria-text';
|
|
3
4
|
export { default as Box } from './components/box';
|
|
4
5
|
export { default as Flex } from './components/flex';
|
|
5
|
-
export type { FlexProperties } from './components/flex';
|
|
6
6
|
export { default as Text, Heading, Paragraph, Span } from './components/text';
|
|
7
7
|
export { default as Gauge } from './components/gauge';
|
|
8
|
-
export type { GaugeProperties } from './components/gauge';
|
|
9
8
|
export { default as Skeleton, SkeletonInstance } from './components/skeleton';
|
|
10
|
-
export { default as Spinner } from './components/spinner';
|
|
9
|
+
export { default as Spinner, RevealSpinner } from './components/spinner';
|
|
11
10
|
export { default as theme, greenColor, overflowProtectionStyles, buttonResetStyles, } from './theme';
|
package/build/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./atom-B-bW2QKm.js"),l=require("./jsx-runtime-BB_1_6y_.js"),u=require("@kuma-ui/core"),c=require("./box-4_-REPb0.js"),x=require("./flex-JFSv9GFG.js"),e=require("./text-BO7Qt7Lj.js"),S=require("./gauge-mog6SjVx.js"),o=require("./skeleton-B5bJ732_.js"),r=require("./spinner-DFfE6tSd.js"),t=require("./theme.js"),m="kakadu-components-3440084244";function p({as:a,className:s,...i}){return l.jsxRuntimeExports.jsx(n.Atom,{as:a??"span",...i,className:u.cx(m,s)})}exports.Atom=n.Atom;exports.defaultAtomElementType=n.defaultAtomElementType;exports.Box=c.Box;exports.Flex=x.Flex;exports.Heading=e.Heading;exports.Paragraph=e.Paragraph;exports.Span=e.Span;exports.Text=e.Text;exports.Gauge=S.Gauge;exports.Skeleton=o.Skeleton;exports.SkeletonInstance=o.SkeletonInstance;exports.RevealSpinner=r.RevealSpinner;exports.Spinner=r.Spinner;exports.buttonResetStyles=t.buttonResetStyles;exports.greenColor=t.greenColor;exports.overflowProtectionStyles=t.overflowProtectionStyles;exports.theme=t.default;exports.AriaText=p;
|
package/build/index.mjs
CHANGED
|
@@ -1,26 +1,39 @@
|
|
|
1
|
-
import { A as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
1
|
+
import { A as r } from "./atom-CqxGy6PS.mjs";
|
|
2
|
+
import { d as S } from "./atom-CqxGy6PS.mjs";
|
|
3
|
+
import { j as a } from "./jsx-runtime-B4hRZ52C.mjs";
|
|
4
|
+
import { cx as s } from "@kuma-ui/core";
|
|
5
|
+
import { B as c } from "./box-Cf22bdCb.mjs";
|
|
6
|
+
import { F as T } from "./flex-C4bEYrMM.mjs";
|
|
7
|
+
import { H as k, P as y, S as A, T as R } from "./text-ZYVNxqac.mjs";
|
|
8
|
+
import { G as P } from "./gauge-C1CypvvD.mjs";
|
|
9
|
+
import { S as v, a as B } from "./skeleton-C593Afco.mjs";
|
|
10
|
+
import { R as F, S as G } from "./spinner-DE_Y3sKH.mjs";
|
|
11
|
+
import { buttonResetStyles as b, greenColor as w, overflowProtectionStyles as C, default as I } from "./theme.mjs";
|
|
12
|
+
const n = "kakadu-components-3440084244";
|
|
13
|
+
function f({
|
|
14
|
+
as: e,
|
|
15
|
+
className: o,
|
|
16
|
+
...t
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ a.jsx(r, { as: e ?? "span", ...t, className: s(n, o) });
|
|
19
|
+
}
|
|
9
20
|
export {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
f as AriaText,
|
|
22
|
+
r as Atom,
|
|
23
|
+
c as Box,
|
|
24
|
+
T as Flex,
|
|
25
|
+
P as Gauge,
|
|
26
|
+
k as Heading,
|
|
27
|
+
y as Paragraph,
|
|
28
|
+
F as RevealSpinner,
|
|
29
|
+
v as Skeleton,
|
|
30
|
+
B as SkeletonInstance,
|
|
31
|
+
A as Span,
|
|
32
|
+
G as Spinner,
|
|
33
|
+
R as Text,
|
|
34
|
+
b as buttonResetStyles,
|
|
35
|
+
S as defaultAtomElementType,
|
|
36
|
+
w as greenColor,
|
|
37
|
+
C as overflowProtectionStyles,
|
|
38
|
+
I as theme
|
|
26
39
|
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { j as a } from "./jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
+
import { useMemo as o, useState as x, useEffect as d } from "react";
|
|
3
|
+
import { cx as f } from "@kuma-ui/core";
|
|
4
|
+
function i({
|
|
5
|
+
size: e = 18,
|
|
6
|
+
strokeWidth: n = 2.5,
|
|
7
|
+
isAnimated: c = !0
|
|
8
|
+
}) {
|
|
9
|
+
const t = o(() => e / 2, [e]), r = o(() => t - n / 2, [n, t]), s = o(() => 2 * Math.PI * r, [r]), u = o(() => s * 0.33, [s]), m = o(() => s - u, [s, u]), p = o(() => -m / 2, [m]);
|
|
10
|
+
return /* @__PURE__ */ a.jsx("svg", { width: e, height: e, preserveAspectRatio: "xMaxYMax meet", viewBox: `0 0 ${e} ${e}`, fill: "none", className: f("kakadu-components-2940817552", c && "kakadu-components-2073235239"), children: /* @__PURE__ */ a.jsx("circle", { cx: t, cy: t, r, stroke: "currentColor", strokeWidth: n, strokeLinecap: "round", strokeDasharray: `${m} ${u}`, strokeDashoffset: p }) });
|
|
11
|
+
}
|
|
12
|
+
function j({
|
|
13
|
+
isVisible: e,
|
|
14
|
+
...n
|
|
15
|
+
}) {
|
|
16
|
+
const [c, t] = x(e);
|
|
17
|
+
return d(() => {
|
|
18
|
+
if (e)
|
|
19
|
+
t(!0);
|
|
20
|
+
else {
|
|
21
|
+
const r = setTimeout(() => {
|
|
22
|
+
t(!1);
|
|
23
|
+
}, 370);
|
|
24
|
+
return () => {
|
|
25
|
+
clearTimeout(r);
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
}, [e]), /* @__PURE__ */ a.jsx("div", { className: f("kakadu-components-833895784", e && "kakadu-components-640347989"), children: /* @__PURE__ */ a.jsx(i, { isAnimated: c, ...n }) });
|
|
29
|
+
}
|
|
30
|
+
export {
|
|
31
|
+
j as R,
|
|
32
|
+
i as S
|
|
33
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const c=require("./jsx-runtime-BB_1_6y_.js"),t=require("react"),i=require("@kuma-ui/core");function x({size:e=18,strokeWidth:s=2.5,isAnimated:u=!0}){const n=t.useMemo(()=>e/2,[e]),o=t.useMemo(()=>n-s/2,[s,n]),r=t.useMemo(()=>2*Math.PI*o,[o]),a=t.useMemo(()=>r*.33,[r]),m=t.useMemo(()=>r-a,[r,a]),p=t.useMemo(()=>-m/2,[m]);return c.jsxRuntimeExports.jsx("svg",{width:e,height:e,preserveAspectRatio:"xMaxYMax meet",viewBox:`0 0 ${e} ${e}`,fill:"none",className:i.cx("kakadu-components-2940817552",u&&"kakadu-components-2073235239"),children:c.jsxRuntimeExports.jsx("circle",{cx:n,cy:n,r:o,stroke:"currentColor",strokeWidth:s,strokeLinecap:"round",strokeDasharray:`${m} ${a}`,strokeDashoffset:p})})}function f({isVisible:e,...s}){const[u,n]=t.useState(e);return t.useEffect(()=>{if(e)n(!0);else{const o=setTimeout(()=>{n(!1)},370);return()=>{clearTimeout(o)}}},[e]),c.jsxRuntimeExports.jsx("div",{className:i.cx("kakadu-components-833895784",e&&"kakadu-components-640347989"),children:c.jsxRuntimeExports.jsx(x,{isAnimated:u,...s})})}exports.RevealSpinner=f;exports.Spinner=x;
|
package/build/spinner.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from './components/spinner';
|
|
1
|
+
export { default, RevealSpinner } from './components/spinner';
|
package/build/spinner.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./spinner-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./spinner-DFfE6tSd.js");exports.RevealSpinner=e.RevealSpinner;exports.default=e.Spinner;
|
package/build/spinner.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kakadu/components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "Kakadu components library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -27,7 +27,10 @@
|
|
|
27
27
|
"fix": "xo --fix --prettier",
|
|
28
28
|
"format": "prettier --write .",
|
|
29
29
|
"lint": "tsc --noEmit && xo --prettier",
|
|
30
|
-
"
|
|
30
|
+
"test": "vitest run",
|
|
31
|
+
"test:watch": "vitest",
|
|
32
|
+
"test:coverage": "vitest run --coverage",
|
|
33
|
+
"prepublishOnly": "npm test && npm run build"
|
|
31
34
|
},
|
|
32
35
|
"exports": {
|
|
33
36
|
".": {
|
|
@@ -40,6 +43,11 @@
|
|
|
40
43
|
"import": "./build/atom.mjs",
|
|
41
44
|
"require": "./build/atom.js"
|
|
42
45
|
},
|
|
46
|
+
"./aria-text": {
|
|
47
|
+
"types": "./build/aria-text.d.ts",
|
|
48
|
+
"import": "./build/aria-text.mjs",
|
|
49
|
+
"require": "./build/aria-text.js"
|
|
50
|
+
},
|
|
43
51
|
"./box": {
|
|
44
52
|
"types": "./build/box.d.ts",
|
|
45
53
|
"import": "./build/box.mjs",
|
|
@@ -109,6 +117,9 @@
|
|
|
109
117
|
"@storybook/addon-onboarding": "^10.0.0",
|
|
110
118
|
"@storybook/addon-vitest": "^10.0.0",
|
|
111
119
|
"@storybook/nextjs-vite": "^10.0.0",
|
|
120
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
121
|
+
"@testing-library/react": "^16.3.0",
|
|
122
|
+
"@testing-library/user-event": "^14.6.1",
|
|
112
123
|
"@types/node": "^20",
|
|
113
124
|
"@types/react": "^19",
|
|
114
125
|
"@types/react-dom": "^19",
|
|
@@ -118,6 +129,7 @@
|
|
|
118
129
|
"dotenv": "^17.2.3",
|
|
119
130
|
"eslint-config-xo-react": "^0.27.0",
|
|
120
131
|
"eslint-plugin-storybook": "^10.0.0",
|
|
132
|
+
"jsdom": "^27.2.0",
|
|
121
133
|
"playwright": "^1.56.1",
|
|
122
134
|
"prettier": "^3.6.2",
|
|
123
135
|
"react": "^19.2.0",
|
package/readme.md
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
# Kakadu Components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@kakadu/components)
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
Install the package via npm:
|
|
8
8
|
|
|
9
|
-
```
|
|
9
|
+
```bash
|
|
10
10
|
npm install @kakadu/components
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
Next, import the base stylesheet in your application’s entry point (for example `_app.jsx`):
|
|
14
14
|
|
|
15
|
-
```
|
|
15
|
+
```tsx
|
|
16
16
|
import '@kakadu/components/components.css';
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
Finally, wrap your application with the `theme`. You can start using components right away:
|
|
20
20
|
|
|
21
|
-
```
|
|
21
|
+
```tsx
|
|
22
22
|
import theme from '@kakadu/components/theme';
|
|
23
23
|
import Box from '@kakadu/components/box';
|
|
24
24
|
|
|
25
25
|
export default function Wrapper({children}) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
return (
|
|
27
|
+
<div className={theme}>
|
|
28
|
+
<Box>Hello!</Box>
|
|
29
|
+
{children}
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
32
|
}
|
|
33
33
|
```
|
|
34
34
|
|
|
@@ -47,5 +47,5 @@ Once started, open [http://localhost:6006](http://localhost:6006) in your browse
|
|
|
47
47
|
## Publishing and release
|
|
48
48
|
|
|
49
49
|
1. Commit your changes.
|
|
50
|
-
2. Depending on the changeset, run `npm version major|minor|patch`.
|
|
50
|
+
2. Depending on the changeset, run `npm version major|minor|patch`.
|
|
51
51
|
3. Run `npm publish`.
|
package/build/box-BdUR8k49.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const o=require("./jsx-runtime-BB_1_6y_.js"),r=require("@kuma-ui/core"),n=require("./atom-B-bW2QKm.js");function c({as:e,className:s,...t}){return o.jsxRuntimeExports.jsx(n.Atom,{as:e??"div",...t,className:r.cx("kakadu-components-1846349723",s)})}exports.Box=c;
|
package/build/box-DmpGO-yx.mjs
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
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 x({
|
|
5
|
-
as: o,
|
|
6
|
-
className: m,
|
|
7
|
-
...r
|
|
8
|
-
}) {
|
|
9
|
-
return /* @__PURE__ */ s.jsx(a, { as: o ?? "div", ...r, className: t("kakadu-components-1846349723", m) });
|
|
10
|
-
}
|
|
11
|
-
export {
|
|
12
|
-
x as B
|
|
13
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { j as m } from "./jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
-
import { useMemo as r } from "react";
|
|
3
|
-
import { cx as u } from "@kuma-ui/core";
|
|
4
|
-
function l({
|
|
5
|
-
size: o = 18,
|
|
6
|
-
strokeWidth: s = 2.5,
|
|
7
|
-
isAnimated: f = !0
|
|
8
|
-
}) {
|
|
9
|
-
const t = r(() => o / 2, [o]), n = r(() => t - s / 2, [s, t]), e = r(() => 2 * Math.PI * n, [n]), c = r(() => e * 0.33, [e]), a = r(() => e - c, [e, c]), p = r(() => -a / 2, [a]);
|
|
10
|
-
return /* @__PURE__ */ m.jsx("svg", { width: o, height: o, preserveAspectRatio: "xMaxYMax meet", viewBox: `0 0 ${o} ${o}`, fill: "none", className: u("kakadu-components-2940817552", f && "kakadu-components-2073235239"), children: /* @__PURE__ */ m.jsx("circle", { cx: t, cy: t, r: n, stroke: "currentColor", strokeWidth: s, strokeLinecap: "round", strokeDasharray: `${a} ${c}`, strokeDashoffset: p }) });
|
|
11
|
-
}
|
|
12
|
-
export {
|
|
13
|
-
l as S
|
|
14
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const a=require("./jsx-runtime-BB_1_6y_.js"),s=require("react"),x=require("@kuma-ui/core");function p({size:e=18,strokeWidth:t=2.5,isAnimated:i=!0}){const o=s.useMemo(()=>e/2,[e]),n=s.useMemo(()=>o-t/2,[t,o]),r=s.useMemo(()=>2*Math.PI*n,[n]),c=s.useMemo(()=>r*.33,[r]),u=s.useMemo(()=>r-c,[r,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("kakadu-components-2940817552",i&&"kakadu-components-2073235239"),children:a.jsxRuntimeExports.jsx("circle",{cx:o,cy:o,r:n,stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeDasharray:`${u} ${c}`,strokeDashoffset:m})})}exports.Spinner=p;
|