@krizaka/ui 3.42.0 → 3.43.0

package/dist/elephant.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+interface ElephantProps extends Omit<SVGProps<SVGSVGElement>, "width" | "height" | "title"> {
+    /** `standing` with the ear folded down, or `flying` with the ear spread like a wing. */
+    pose?: "standing" | "flying";
+    /** Width and height in pixels. */
+    size?: number;
+    /** The wing flaps gently (a flying elephant only). Off with `false`; always off under prefers-reduced-motion. */
+    animated?: boolean;
+    /** An accessible name (the mark becomes an image); without it the mark is decorative. */
+    title?: string;
+}
+/**
+ * The elephant: a small, playful mark from the neighbour joke — « the elephant with those ears can fly ». Not a product
+ * logo: a quiet figure for the hero of a page or the closing of a chat. Sage body, sand ear, flat colours that read on
+ * both themes; decorative by default.
+ */
+declare function Elephant({ pose, size, animated, title, className, ...rest }: ElephantProps): React.JSX.Element;
+
+declare const ELEPHANT: {
+    readonly viewBox: "0 0 200 200";
+    readonly stroke: 8;
+    readonly sand: string;
+    readonly sage: string;
+    /** The eye: one node, a filled dot. */
+    readonly eye: {
+        readonly cx: 154;
+        readonly cy: 66;
+        readonly r: 5;
+    };
+    readonly standing: {
+        /** Body, head and the two legs, one closed outline: straight runs and 45° cuts. */
+        readonly body: "M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V168 H108 V138 H62 V168 H38 V138 H30 Z";
+        /** The trunk: down from the head's front, curling up at its tip. */
+        readonly trunk: "M164 108 V146 L172 158 H184 V144";
+        /** The ear, folded down over the shoulder. */
+        readonly ear: "M116 52 L92 56 L84 100 L104 124 L128 112 Z";
+        readonly tail: "M30 90 L20 108 V118";
+    };
+    readonly flying: {
+        readonly body: "M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V140 H108 V128 H62 V140 H38 V128 H30 Z";
+        readonly trunk: "M164 108 V142 L172 154 H184 V140";
+        /** The ear, spread up and back: the wing. */
+        readonly ear: "M116 78 L120 30 L90 10 L78 34 L52 24 L56 52 L30 60 L66 84 Z";
+        readonly tail: "M30 90 L18 102 V112";
+        readonly wind: "M22 150 H50 M12 166 H44 M32 180 H58";
+    };
+    /** The flap: a few degrees around the shoulder, 1.6 s. */
+    readonly motion: {
+        readonly flap: 1.6;
+        readonly origin: "114px 80px";
+        readonly angle: 7;
+    };
+};
+
+export { ELEPHANT, Elephant, type ElephantProps };

package/dist/elephant.js

@@ -0,0 +1,61 @@
+"use client";
+
+// src/elephant/geometry.ts
+import { marks } from "@krizaka/tokens/native";
+var SAND = marks.yororis[0][1];
+var SAGE = marks.yororis[marks.yororis.length - 1][1];
+var ELEPHANT = {
+  viewBox: "0 0 200 200",
+  stroke: 8,
+  sand: SAND,
+  sage: SAGE,
+  /** The eye: one node, a filled dot. */
+  eye: { cx: 154, cy: 66, r: 5 },
+  standing: {
+    /** Body, head and the two legs, one closed outline: straight runs and 45° cuts. */
+    body: "M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V168 H108 V138 H62 V168 H38 V138 H30 Z",
+    /** The trunk: down from the head's front, curling up at its tip. */
+    trunk: "M164 108 V146 L172 158 H184 V144",
+    /** The ear, folded down over the shoulder. */
+    ear: "M116 52 L92 56 L84 100 L104 124 L128 112 Z",
+    tail: "M30 90 L20 108 V118"
+  },
+  flying: {
+    body: "M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V140 H108 V128 H62 V140 H38 V128 H30 Z",
+    trunk: "M164 108 V142 L172 154 H184 V140",
+    /** The ear, spread up and back: the wing. */
+    ear: "M116 78 L120 30 L90 10 L78 34 L52 24 L56 52 L30 60 L66 84 Z",
+    tail: "M30 90 L18 102 V112",
+    wind: "M22 150 H50 M12 166 H44 M32 180 H58"
+  },
+  /** The flap: a few degrees around the shoulder, 1.6 s. */
+  motion: { flap: 1.6, origin: "114px 80px", angle: 7 }
+};
+
+// src/elephant/elephant.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CSS = `
+.kz-elephant-flap { transform-box: view-box; transform-origin: ${ELEPHANT.motion.origin}; animation: kz-elephant-flap ${ELEPHANT.motion.flap}s ease-in-out infinite; }
+@keyframes kz-elephant-flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-${ELEPHANT.motion.angle}deg); } }
+@media (prefers-reduced-motion: reduce) { .kz-elephant-flap { animation: none; } }
+`;
+var line = { strokeWidth: ELEPHANT.stroke, strokeLinecap: "square", strokeLinejoin: "miter", fill: "none" };
+function Elephant({ pose = "standing", size = 64, animated = true, title, className, ...rest }) {
+  const flying = pose === "flying";
+  const p = flying ? ELEPHANT.flying : ELEPHANT.standing;
+  const a11y = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: ELEPHANT.viewBox, xmlns: "http://www.w3.org/2000/svg", className, "data-pose": pose, ...a11y, ...rest, children: [
+    flying && animated ? /* @__PURE__ */ jsx("style", { children: CSS }) : null,
+    flying ? /* @__PURE__ */ jsx("path", { d: ELEPHANT.flying.wind, stroke: ELEPHANT.sage, opacity: ".45", ...line }) : null,
+    /* @__PURE__ */ jsx("path", { d: p.body, stroke: ELEPHANT.sage, ...line }),
+    /* @__PURE__ */ jsx("path", { d: p.trunk, stroke: ELEPHANT.sage, ...line }),
+    /* @__PURE__ */ jsx("path", { d: p.tail, stroke: ELEPHANT.sage, ...line }),
+    /* @__PURE__ */ jsx("g", { className: flying && animated ? "kz-elephant-flap" : void 0, children: /* @__PURE__ */ jsx("path", { d: p.ear, stroke: ELEPHANT.sand, ...line }) }),
+    /* @__PURE__ */ jsx("circle", { cx: ELEPHANT.eye.cx, cy: ELEPHANT.eye.cy, r: ELEPHANT.eye.r, fill: ELEPHANT.sage })
+  ] });
+}
+export {
+  ELEPHANT,
+  Elephant
+};
+//# sourceMappingURL=elephant.js.map

package/dist/elephant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elephant/geometry.ts","../src/elephant/elephant.tsx"],"sourcesContent":["import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The elephant's geometry (200 × 200 view box, a pen line of 8, square caps, mitred joins — the Cahier grammar of the\n * marks and of @krizaka/icons: straight runs and 45° cuts, no rounded outline). It faces right. Two poses of one\n * animal: `standing`, the ear folded down beside the head, and `flying`, the ear spread up like a wing (the darija\n * joke: « l'éléphant avec ses oreilles, il peut voler »), the legs tucked, three lines of wind behind.\n *\n * The body and the trunk are sage, the ear and the wing sand: the two stops of Yororis' mark gradient (`marks.yororis`\n * of @krizaka/tokens), each ≥ 3:1 on the page surfaces of both themes. Flat colours: no glow, no gradient.\n */\nexport const SAND = marks.yororis[0]![1];\nexport const SAGE = marks.yororis[marks.yororis.length - 1]![1];\n\nexport const ELEPHANT = {\n  viewBox: \"0 0 200 200\",\n  stroke: 8,\n  sand: SAND,\n  sage: SAGE,\n  /** The eye: one node, a filled dot. */\n  eye: { cx: 154, cy: 66, r: 5 },\n  standing: {\n    /** Body, head and the two legs, one closed outline: straight runs and 45° cuts. */\n    body: \"M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V168 H108 V138 H62 V168 H38 V138 H30 Z\",\n    /** The trunk: down from the head's front, curling up at its tip. */\n    trunk: \"M164 108 V146 L172 158 H184 V144\",\n    /** The ear, folded down over the shoulder. */\n    ear: \"M116 52 L92 56 L84 100 L104 124 L128 112 Z\",\n    tail: \"M30 90 L20 108 V118\",\n  },\n  flying: {\n    body: \"M30 88 L44 74 H112 V54 L126 40 H158 L176 56 V100 L168 108 H132 V140 H108 V128 H62 V140 H38 V128 H30 Z\",\n    trunk: \"M164 108 V142 L172 154 H184 V140\",\n    /** The ear, spread up and back: the wing. */\n    ear: \"M116 78 L120 30 L90 10 L78 34 L52 24 L56 52 L30 60 L66 84 Z\",\n    tail: \"M30 90 L18 102 V112\",\n    wind: \"M22 150 H50 M12 166 H44 M32 180 H58\",\n  },\n  /** The flap: a few degrees around the shoulder, 1.6 s. */\n  motion: { flap: 1.6, origin: \"114px 80px\", angle: 7 },\n} as const;\n","import type { SVGProps } from \"react\";\n\nimport { ELEPHANT as G } from \"./geometry\";\n\nexport interface ElephantProps extends Omit<SVGProps<SVGSVGElement>, \"width\" | \"height\" | \"title\"> {\n  /** `standing` with the ear folded down, or `flying` with the ear spread like a wing. */\n  pose?: \"standing\" | \"flying\";\n  /** Width and height in pixels. */\n  size?: number;\n  /** The wing flaps gently (a flying elephant only). Off with `false`; always off under prefers-reduced-motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n}\n\nconst CSS = `\n.kz-elephant-flap { transform-box: view-box; transform-origin: ${G.motion.origin}; animation: kz-elephant-flap ${G.motion.flap}s ease-in-out infinite; }\n@keyframes kz-elephant-flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-${G.motion.angle}deg); } }\n@media (prefers-reduced-motion: reduce) { .kz-elephant-flap { animation: none; } }\n`;\n\nconst line = { strokeWidth: G.stroke, strokeLinecap: \"square\", strokeLinejoin: \"miter\", fill: \"none\" } as const;\n\n/**\n * The elephant: a small, playful mark from the neighbour joke — « the elephant with those ears can fly ». Not a product\n * logo: a quiet figure for the hero of a page or the closing of a chat. Sage body, sand ear, flat colours that read on\n * both themes; decorative by default.\n */\nexport function Elephant({ pose = \"standing\", size = 64, animated = true, title, className, ...rest }: ElephantProps) {\n  const flying = pose === \"flying\";\n  const p = flying ? G.flying : G.standing;\n  const a11y = title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const };\n  return (\n    <svg width={size} height={size} viewBox={G.viewBox} xmlns=\"http://www.w3.org/2000/svg\" className={className} data-pose={pose} {...a11y} {...rest}>\n      {flying && animated ? <style>{CSS}</style> : null}\n      {flying ? <path d={G.flying.wind} stroke={G.sage} opacity=\".45\" {...line} /> : null}\n      <path d={p.body} stroke={G.sage} {...line} />\n            <path d={p.trunk} stroke={G.sage} {...line} />\n      <path d={p.tail} stroke={G.sage} {...line} />\n      <g className={flying && animated ? \"kz-elephant-flap\" : undefined}>\n        <path d={p.ear} stroke={G.sand} {...line} />\n      </g>\n      <circle cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.sage} />\n    </svg>\n  );\n}\n"],"mappings":";;;AAAA,SAAS,aAAa;AAWf,IAAM,OAAO,MAAM,QAAQ,CAAC,EAAG,CAAC;AAChC,IAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ,SAAS,CAAC,EAAG,CAAC;AAEvD,IAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA;AAAA,EAEN,KAAK,EAAE,IAAI,KAAK,IAAI,IAAI,GAAG,EAAE;AAAA,EAC7B,UAAU;AAAA;AAAA,IAER,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,QAAQ,EAAE,MAAM,KAAK,QAAQ,cAAc,OAAO,EAAE;AACtD;;;ACPI,SACwB,KADxB;AAlBJ,IAAM,MAAM;AAAA,iEACqD,SAAE,OAAO,MAAM,iCAAiC,SAAE,OAAO,IAAI;AAAA,+FAC/B,SAAE,OAAO,KAAK;AAAA;AAAA;AAI7G,IAAM,OAAO,EAAE,aAAa,SAAE,QAAQ,eAAe,UAAU,gBAAgB,SAAS,MAAM,OAAO;AAO9F,SAAS,SAAS,EAAE,OAAO,YAAY,OAAO,IAAI,WAAW,MAAM,OAAO,WAAW,GAAG,KAAK,GAAkB;AACpH,QAAM,SAAS,SAAS;AACxB,QAAM,IAAI,SAAS,SAAE,SAAS,SAAE;AAChC,QAAM,OAAO,QAAQ,EAAE,MAAM,OAAgB,cAAc,MAAM,IAAI,EAAE,eAAe,KAAc;AACpG,SACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAS,SAAE,SAAS,OAAM,8BAA6B,WAAsB,aAAW,MAAO,GAAG,MAAO,GAAG,MACzI;AAAA,cAAU,WAAW,oBAAC,WAAO,eAAI,IAAW;AAAA,IAC5C,SAAS,oBAAC,UAAK,GAAG,SAAE,OAAO,MAAM,QAAQ,SAAE,MAAM,SAAQ,OAAO,GAAG,MAAM,IAAK;AAAA,IAC/E,oBAAC,UAAK,GAAG,EAAE,MAAM,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IACrC,oBAAC,UAAK,GAAG,EAAE,OAAO,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IAClD,oBAAC,UAAK,GAAG,EAAE,MAAM,QAAQ,SAAE,MAAO,GAAG,MAAM;AAAA,IAC3C,oBAAC,OAAE,WAAW,UAAU,WAAW,qBAAqB,QACtD,8BAAC,UAAK,GAAG,EAAE,KAAK,QAAQ,SAAE,MAAO,GAAG,MAAM,GAC5C;AAAA,IACA,oBAAC,YAAO,IAAI,SAAE,IAAI,IAAI,IAAI,SAAE,IAAI,IAAI,GAAG,SAAE,IAAI,GAAG,MAAM,SAAE,MAAM;AAAA,KAChE;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export { MotionObserver, RotatingWord } from './motion.js';
+export { M as MotionObserver, R as RotatingWord } from './RotatingWord-D9s7FXFD.js';
 
 /** Joins class names, skipping the falsy ones. */
 declare function cx(...parts: Array<string | false | null | undefined>): string;