@ahrowe/ui 0.36.0 → 0.38.0

package/docs/WeatherIcon.md

@@ -0,0 +1,49 @@
+# WeatherIcon
+
+**When to use:** An animated weather symbol for a forecast, a dashboard widget or a day selector, one per condition a forecast reports. For a static pictogram of anything else, use a FontAwesome icon.
+
+**Keywords:** forecast, rain, snow, sun, cloud, storm, climate, meteo
+
+**Import:** `import { WeatherIcon, WeatherType } from '@ahrowe/ui'`  
+**Types:** `import type { WeatherIconProps, WeatherIconLabels } from '@ahrowe/ui'`
+
+```tsx
+import { WeatherIcon, WeatherType } from '@ahrowe/ui';
+
+<WeatherIcon type={WeatherType.Rainy} />
+
+// Any CSS size; a number is pixels
+<WeatherIcon type={WeatherType.Snowy} size='3em' />
+
+// A still frame, for small or repeated icons such as a row of days
+<WeatherIcon type={WeatherType.PartlyCloudy} size={32} animated={false} />
+```
+
+**Enums:** `WeatherType`: `Sunny` · `ClearNight` · `Cloudy` · `PartlyCloudy` · `PartlyCloudyNight` · `RainyLight` · `Rainy` · `RainyHeavy` · `Snowy` · `Hail` · `Foggy` · `Thunderstorm`
+
+**Your API's own enum works as it is.** `type` takes the enum or its string value (`'rainy'`, `'partlyCloudy'`), so a backend enum with the same values passes without a mapping, even though TypeScript treats two enums as different types.
+
+**Colour** is the text colour it sits in (`currentColor`), like any icon. Set `color` on it or on a parent:
+
+```tsx
+<WeatherIcon type={WeatherType.Sunny} style={{ color: 'var(--warn-color)' }} />
+```
+
+**Motion.** Clouds drift, rain and snow fall, hail bounces, lightning flashes twice every four seconds. Under `prefers-reduced-motion` it draws the same still frame as `animated={false}`: each drop, flake and stone frozen at a different point of its fall rather than all bunched under the cloud. `animated={false}` is also worth setting on a long row of small icons, where the motion is too small to see but costs the same. Set it app-wide through `ConfigProvider`.
+
+**Accessibility.** The svg is `role="img"` and named after the weather ("Heavy rain"). Where the text next to it already says the same, pass `aria-hidden`.
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `type` | `WeatherType \| string value` | The weather to draw (required) |
+| `size` | `number \| string` | Width and height. A number is pixels (default `64`) |
+| `animated` | `boolean` | `false` draws a still frame (default `true`). Always still under reduced motion |
+| `labels` | `WeatherIconLabels` | The accessible name of each weather |
+
+The native svg attributes (`className`, `style`, `aria-*`, `data-*`, handlers) reach the `<svg>`.
+
+**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ WeatherIcon: { animated: false } }}`. See [ConfigProvider.md](ConfigProvider.md).
+
+**Labels:** one key per `WeatherType` value, `sunny` to `thunderstorm`: the accessible name of each weather. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `WeatherIconLabels`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",
@@ -128,7 +128,6 @@
     "publint": "^0.3.24",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "react-element-to-jsx-string": "^17.0.1",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "remark-gfm": "^4.0.1",

package/dist/cjs-types/common/loading/iconLoading/iconLoading.d.ts

@@ -1,5 +0,0 @@
-import { default as React } from 'react';
-declare function IconLoading({ className }: {
-    className?: string | undefined;
-}): React.JSX.Element;
-export default IconLoading;

package/dist/cjs-types/common/loading/iconLoading/index.d.ts

@@ -1,2 +0,0 @@
-import { default as IconLoading } from './iconLoading.js';
-export default IconLoading;

package/dist/esm/common/loading/iconLoading/iconLoading.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"./iconLoading.module.mjs";import"react";import t from"classnames";import{jsx as n,jsxs as r}from"react/jsx-runtime";function i({className:i=``}){return n(`div`,{className:t(e.iconLoading,i),children:r(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`-8 -1 16 14`,children:[n(`path`,{className:e.iconLoadingFirst,d:`M 0 0 C 3 5 6 5 6 12`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingFirst,d:`M 0 0 C -3 5 -6 5 -6 12`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingFirst,d:`M 0 0 L 0 10`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingSecond,d:`M 0.1 10 C -3 10 -4 10 -6 12`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingSecond,d:`M -0.1 10 C 3 10 4 10 6 12`,strokeWidth:`1.7`,fill:`none`})]})})}export{i as default};
-//# sourceMappingURL=iconLoading.mjs.map

package/dist/esm/common/loading/iconLoading/iconLoading.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconLoading.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\n\nimport styles from './iconLoading.module.pcss';\n\nfunction IconLoading({ className = '' }) {\n  return (\n    <div className={cx(styles.iconLoading, className)}>\n      <svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -1 16 14'>\n        <path className={styles.iconLoadingFirst} d='M 0 0 C 3 5 6 5 6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingFirst} d='M 0 0 C -3 5 -6 5 -6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingFirst} d='M 0 0 L 0 10' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingSecond} d='M 0.1 10 C -3 10 -4 10 -6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingSecond} d='M -0.1 10 C 3 10 4 10 6 12' strokeWidth='1.7' fill='none' />\n      </svg>\n    </div>\n  );\n}\n\nexport default IconLoading;\n"],"mappings":"+IAKA,SAAS,EAAY,CAAE,YAAY,IAAM,CACvC,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,CAAS,EAC9C,SAAA,EAAC,MAAD,CAAK,MAAM,6BAA6B,QAAQ,cAAhD,SAAA,CACE,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,uBAAuB,YAAY,MAAM,KAAK,MAAQ,CAAA,EAClG,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,0BAA0B,YAAY,MAAM,KAAK,MAAQ,CAAA,EACrG,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,eAAe,YAAY,MAAM,KAAK,MAAQ,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAmB,EAAE,+BAA+B,YAAY,MAAM,KAAK,MAAQ,CAAA,EAC3G,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAmB,EAAE,6BAA6B,YAAY,MAAM,KAAK,MAAQ,CAAA,CACtG,GACF,CAAA,CAET"}

package/dist/esm/common/loading/iconLoading/iconLoading.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`iconLoading_wovj4`,t=`spin-to-oblivion_0tZtm`,n=`iconLoading-first_SBwP3`,r=`draw-line_1NiWA`,i=`iconLoading-second_nHrW3`,a=`draw-line-two_HmaHl`,o={iconLoading:e,"spin-to-oblivion":`spin-to-oblivion_0tZtm`,spinToOblivion:t,"iconLoading-first":`iconLoading-first_SBwP3`,iconLoadingFirst:n,"draw-line":`draw-line_1NiWA`,drawLine:r,"iconLoading-second":`iconLoading-second_nHrW3`,iconLoadingSecond:i,"draw-line-two":`draw-line-two_HmaHl`,drawLineTwo:a};export{o as default,r as drawLine,a as drawLineTwo,e as iconLoading,n as iconLoadingFirst,i as iconLoadingSecond,t as spinToOblivion};
-//# sourceMappingURL=iconLoading.module.mjs.map

package/dist/esm/common/loading/iconLoading/iconLoading.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconLoading.module.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.module.pcss"],"sourcesContent":[".iconLoading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  user-select: none;\n  pointer-events: none;\n\n  --draw-duration: 0.8s;\n  --delay: 0.4s;\n\n  svg {\n    stroke-dasharray: 14;\n    stroke-dashoffset: 14;\n    width: 200px;\n    aspect-ratio: 1;\n    animation: calc(var(--draw-duration) * 3) spin-to-oblivion var(--delay) infinite;\n    transform: rotate(0deg);\n    stroke: var(--primary-color);\n    stroke-linecap: round;\n  }\n\n  &-first {\n    animation: calc(var(--draw-duration) * 3) draw-line var(--delay) infinite;\n  }\n\n  &-second {\n    animation: calc(var(--draw-duration) * 3) draw-line-two var(--delay) infinite;\n  }\n\n  @keyframes draw-line {\n    33% {\n      stroke-dashoffset: 0;\n    }\n\n    95% {\n      stroke-dashoffset: 0;\n    }\n\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes draw-line-two {\n    33% {\n      stroke-dashoffset: 14;\n    }\n\n    66% {\n      stroke-dashoffset: 0;\n    }\n\n    95% {\n      stroke-dashoffset: 0;\n    }\n\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes spin-to-oblivion {\n    50% {\n      transform: rotate(180deg);\n    }\n\n    75% {\n      transform: rotate(180deg) scale(0);\n    }\n\n    100% {\n      transform: rotate(180deg) scale(0);\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/loading/iconLoading/index.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"./iconLoading.mjs";var t=e;export{t as default};
-//# sourceMappingURL=index.mjs.map

package/dist/esm/common/loading/iconLoading/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/index.ts"],"sourcesContent":["import IconLoading from './iconLoading.js';\n\nexport default IconLoading;\n"],"mappings":"8CAEA,IAAA,EAAe"}

package/dist/types/common/loading/iconLoading/iconLoading.d.ts

@@ -1,5 +0,0 @@
-import { default as React } from 'react';
-declare function IconLoading({ className }: {
-    className?: string | undefined;
-}): React.JSX.Element;
-export default IconLoading;

package/dist/types/common/loading/iconLoading/index.d.ts

@@ -1,2 +0,0 @@
-import { default as IconLoading } from './iconLoading.js';
-export default IconLoading;