@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-sparkline/pf-sparkline.js

@@ -0,0 +1,271 @@
+import { sparklineAreaPath, sparklineLinePath, sparklinePoints } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A small line or area chart with no axes.
+ *
+ * All of the geometry is core's, so this and the React `Sparkline` put the
+ * same numbers in the same places — including the three edge cases that were
+ * wrong before the extraction: one value gave `NaN`, a flat series was pinned
+ * to an edge, and the closing branch of the old path builder interpolated a
+ * boolean.
+ *
+ * @part svg - the chart.
+ * @part area - the filled region, on the `area` variant.
+ * @part line - the line.
+ * @part dot - the dot at the last point, when `endDot` is set.
+ */
+export class PfSparkline {
+    /**
+     * The values to plot.
+     *
+     * A `number[]` for a framework consumer, and a comma-separated string for
+     * plain HTML — `data="1,4,2,8"` — because Stencil coerces an attribute only
+     * for the primitive types it recognises, and an array is not one of them.
+     * Read through `values` below, never directly.
+     */
+    data = [];
+    width = 120;
+    height = 36;
+    /** `line` draws only the stroke; `area` fills under it too. Reflected. */
+    variant = 'line';
+    strokeWidth = 1.5;
+    /** Overrides the token colour, for a chart that has to match its data. */
+    color;
+    /** Draw a dot at the last value. */
+    endDot = false;
+    /**
+     * Draw the line in on first paint. Off by default. Reflected.
+     *
+     * `animated`, where the React prop is `animate`: `animate` is a **reserved
+     * public name** — `Element.prototype.animate` is the Web Animations API —
+     * and Stencil refuses to build a prop that shadows a prototype member. The
+     * React component is a function taking props and has no such collision.
+     */
+    animated = false;
+    /**
+     * The chart's accessible name.
+     *
+     * Without one the chart is `presentation`: a sparkline with no name is
+     * decoration beside a number that already says what it means, and
+     * announcing an unnamed graphic is worse than skipping it.
+     */
+    label;
+    /** The values, however they arrived. */
+    get values() {
+        if (Array.isArray(this.data))
+            return this.data.map(Number).filter(Number.isFinite);
+        return String(this.data ?? '')
+            .split(',')
+            .map((part) => Number(part.trim()))
+            .filter(Number.isFinite);
+    }
+    render() {
+        const width = Number(this.width) || 120;
+        const height = Number(this.height) || 36;
+        const strokeWidth = Number(this.strokeWidth) || 1.5;
+        const padding = strokeWidth + 2;
+        const points = sparklinePoints(this.values, { width, height, padding });
+        const line = sparklineLinePath(points);
+        const area = this.variant === 'area' ? sparklineAreaPath(points, height - padding + strokeWidth) : '';
+        const last = points[points.length - 1];
+        const stroke = this.color ?? 'var(--pf-sparkline-color)';
+        return (h(Host, { key: '48c34496ff9ef2f3f4a41c88306c9b889675f75a' }, h("svg", { key: 'a20441dd7a4ac13826ef0a9a1182e617ed401100', class: "svg", part: "svg", width: width, height: height, viewBox: `0 0 ${width} ${height}`, role: this.label ? 'img' : 'presentation', "aria-label": this.label }, area && h("path", { key: 'ae71a2b060e46406eb6f1e62faae67d8bd624b10', class: "area", part: "area", d: area, fill: stroke }), line && (h("path", { key: 'ebbb9d2e7fb866410a04229752e76963a702761e', class: "line", part: "line", d: line, fill: "none", stroke: stroke, "stroke-width": strokeWidth, "stroke-linecap": "round", "stroke-linejoin": "round",
+            // The dash maths below is then independent of the real length.
+            pathLength: this.animated ? 1 : undefined })), this.endDot && last && (h("circle", { key: '43b0fe15ba268da3ec1d80b3ade57b3d12a987bc', class: "dot", part: "dot", cx: last[0], cy: last[1], r: strokeWidth + 1.5, fill: stroke })))));
+    }
+    static get is() { return "pf-sparkline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-sparkline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-sparkline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The values to plot.\n\nA `number[]` for a framework consumer, and a comma-separated string for\nplain HTML \u2014 `data=\"1,4,2,8\"` \u2014 because Stencil coerces an attribute only\nfor the primitive types it recognises, and an array is not one of them.\nRead through `values` below, never directly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "120"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "36"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'line' | 'area'",
+                    "resolved": "\"area\" | \"line\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`line` draws only the stroke; `area` fills under it too. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'line'"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "1.5"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the token colour, for a chart that has to match its data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "endDot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draw a dot at the last value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "end-dot",
+                "defaultValue": "false"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draw the line in on first paint. Off by default. Reflected.\n\n`animated`, where the React prop is `animate`: `animate` is a **reserved\npublic name** \u2014 `Element.prototype.animate` is the Web Animations API \u2014\nand Stencil refuses to build a prop that shadows a prototype member. The\nReact component is a function taking props and has no such collision."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "animated",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The chart's accessible name.\n\nWithout one the chart is `presentation`: a sparkline with no name is\ndecoration beside a number that already says what it means, and\nannouncing an unnamed graphic is worse than skipping it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-sparkline.js.map

package/dist/collection/components/pf-sparkline/pf-sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-sparkline.js","sourceRoot":"","sources":["../../../src/components/pf-sparkline/pf-sparkline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { sparklineAreaPath, sparklineLinePath, sparklinePoints } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A small line or area chart with no axes.\n *\n * All of the geometry is core's, so this and the React `Sparkline` put the\n * same numbers in the same places — including the three edge cases that were\n * wrong before the extraction: one value gave `NaN`, a flat series was pinned\n * to an edge, and the closing branch of the old path builder interpolated a\n * boolean.\n *\n * @part svg - the chart.\n * @part area - the filled region, on the `area` variant.\n * @part line - the line.\n * @part dot - the dot at the last point, when `endDot` is set.\n */\n@Component({\n  tag: 'pf-sparkline',\n  styleUrl: 'pf-sparkline.css',\n  shadow: true,\n})\nexport class PfSparkline {\n  /**\n   * The values to plot.\n   *\n   * A `number[]` for a framework consumer, and a comma-separated string for\n   * plain HTML — `data=\"1,4,2,8\"` — because Stencil coerces an attribute only\n   * for the primitive types it recognises, and an array is not one of them.\n   * Read through `values` below, never directly.\n   */\n  @Prop() data: number[] | string = [];\n\n  @Prop() width = 120;\n\n  @Prop() height = 36;\n\n  /** `line` draws only the stroke; `area` fills under it too. Reflected. */\n  @Prop({ reflect: true }) variant: 'line' | 'area' = 'line';\n\n  @Prop() strokeWidth = 1.5;\n\n  /** Overrides the token colour, for a chart that has to match its data. */\n  @Prop() color?: string;\n\n  /** Draw a dot at the last value. */\n  @Prop({ reflect: true }) endDot = false;\n\n  /**\n   * Draw the line in on first paint. Off by default. Reflected.\n   *\n   * `animated`, where the React prop is `animate`: `animate` is a **reserved\n   * public name** — `Element.prototype.animate` is the Web Animations API —\n   * and Stencil refuses to build a prop that shadows a prototype member. The\n   * React component is a function taking props and has no such collision.\n   */\n  @Prop({ reflect: true }) animated = false;\n\n  /**\n   * The chart's accessible name.\n   *\n   * Without one the chart is `presentation`: a sparkline with no name is\n   * decoration beside a number that already says what it means, and\n   * announcing an unnamed graphic is worse than skipping it.\n   */\n  @Prop() label?: string;\n\n  /** The values, however they arrived. */\n  private get values(): number[] {\n    if (Array.isArray(this.data)) return this.data.map(Number).filter(Number.isFinite);\n\n    return String(this.data ?? '')\n      .split(',')\n      .map((part) => Number(part.trim()))\n      .filter(Number.isFinite);\n  }\n\n  render() {\n    const width = Number(this.width) || 120;\n    const height = Number(this.height) || 36;\n    const strokeWidth = Number(this.strokeWidth) || 1.5;\n    const padding = strokeWidth + 2;\n\n    const points = sparklinePoints(this.values, { width, height, padding });\n    const line = sparklineLinePath(points);\n    const area =\n      this.variant === 'area' ? sparklineAreaPath(points, height - padding + strokeWidth) : '';\n    const last = points[points.length - 1];\n    const stroke = this.color ?? 'var(--pf-sparkline-color)';\n\n    return (\n      <Host>\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          width={width}\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n          role={this.label ? 'img' : 'presentation'}\n          aria-label={this.label}\n        >\n          {area && <path class=\"area\" part=\"area\" d={area} fill={stroke} />}\n          {line && (\n            <path\n              class=\"line\"\n              part=\"line\"\n              d={line}\n              fill=\"none\"\n              stroke={stroke}\n              stroke-width={strokeWidth}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              // The dash maths below is then independent of the real length.\n              pathLength={this.animated ? 1 : undefined}\n            />\n          )}\n          {this.endDot && last && (\n            <circle\n              class=\"dot\"\n              part=\"dot\"\n              cx={last[0]}\n              cy={last[1]}\n              r={strokeWidth + 1.5}\n              fill={stroke}\n            />\n          )}\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-switch/pf-switch.css

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.field {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.input {
+  appearance: none;
+  background: var(--pf-switch-track-bg);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  height: 24px;
+  margin: 0;
+  position: relative;
+  transition: background-color 120ms ease;
+  width: 44px;
+}
+
+/* The thumb. */
+.input::after {
+  background: var(--pf-switch-thumb-bg);
+  border-radius: 50%;
+  content: '';
+  height: 20px;
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  transition: transform 120ms ease;
+  width: 20px;
+}
+
+.input:checked {
+  background: var(--pf-switch-track-checked-bg);
+}
+
+.input:checked::after {
+  transform: translateX(20px);
+}
+
+.input:focus-visible {
+  box-shadow: var(--pf-switch-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.input:disabled + .label {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.label {
+  color: var(--pf-switch-label-text);
+  font-size: var(--font-size-md);
+}
+
+.error {
+  color: var(--pf-switch-field-error, var(--pf-field-error));
+  font-size: var(--font-size-sm);
+  margin: var(--space-1) 0 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .input,
+  .input::after {
+    transition: none;
+  }
+}