@pathscale/ui 1.2.1 → 1.2.3

package/dist/components/color-wheel-flower/ColorWheelFlower.classes.d.ts

@@ -0,0 +1,33 @@
+export declare const CLASSES: {
+    readonly base: "color-wheel-flower";
+    readonly flag: {
+        readonly disabled: "color-wheel-flower--disabled";
+    };
+    readonly rings: "color-wheel-flower__rings";
+    readonly ringShell: {
+        readonly base: "color-wheel-flower__ring-shell";
+        readonly outer: "color-wheel-flower__ring-shell--outer";
+        readonly inner: "color-wheel-flower__ring-shell--inner";
+    };
+    readonly ring: {
+        readonly base: "color-wheel-flower__ring";
+        readonly outer: "color-wheel-flower__ring--outer";
+        readonly inner: "color-wheel-flower__ring--inner";
+    };
+    readonly picker: "color-wheel-flower__picker";
+    readonly dot: {
+        readonly base: "color-wheel-flower__dot";
+        readonly frame: "color-wheel-flower__dot-frame";
+        readonly motion: "color-wheel-flower__dot-motion";
+    };
+    readonly halo: "color-wheel-flower__halo";
+    readonly swatch: {
+        readonly base: "color-wheel-flower__swatch";
+        readonly center: "color-wheel-flower__swatch--center";
+    };
+    readonly highlight: {
+        readonly base: "color-wheel-flower__highlight";
+        readonly hovered: "color-wheel-flower__highlight--hovered";
+        readonly pulsing: "color-wheel-flower__highlight--pulsing";
+    };
+};

package/dist/components/color-wheel-flower/ColorWheelFlower.classes.js

@@ -0,0 +1,34 @@
+const CLASSES = {
+    base: "color-wheel-flower",
+    flag: {
+        disabled: "color-wheel-flower--disabled"
+    },
+    rings: "color-wheel-flower__rings",
+    ringShell: {
+        base: "color-wheel-flower__ring-shell",
+        outer: "color-wheel-flower__ring-shell--outer",
+        inner: "color-wheel-flower__ring-shell--inner"
+    },
+    ring: {
+        base: "color-wheel-flower__ring",
+        outer: "color-wheel-flower__ring--outer",
+        inner: "color-wheel-flower__ring--inner"
+    },
+    picker: "color-wheel-flower__picker",
+    dot: {
+        base: "color-wheel-flower__dot",
+        frame: "color-wheel-flower__dot-frame",
+        motion: "color-wheel-flower__dot-motion"
+    },
+    halo: "color-wheel-flower__halo",
+    swatch: {
+        base: "color-wheel-flower__swatch",
+        center: "color-wheel-flower__swatch--center"
+    },
+    highlight: {
+        base: "color-wheel-flower__highlight",
+        hovered: "color-wheel-flower__highlight--hovered",
+        pulsing: "color-wheel-flower__highlight--pulsing"
+    }
+};
+export { CLASSES };

package/dist/components/color-wheel-flower/ColorWheelFlower.css

@@ -0,0 +1,147 @@
+@layer components {
+  .color-wheel-flower {
+    position: relative;
+    width: 190px;
+    height: 190px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .color-wheel-flower--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .color-wheel-flower__rings {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .color-wheel-flower__ring-shell {
+    position: absolute;
+    inset: 0;
+  }
+
+  .color-wheel-flower__ring-shell--outer {
+    transform: scale(1.1);
+  }
+
+  .color-wheel-flower__ring-shell--inner {
+    transform: scale(0.9);
+  }
+
+  .color-wheel-flower__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+  }
+
+  .color-wheel-flower__ring--outer {
+    will-change: transform, opacity, box-shadow, background;
+  }
+
+  .color-wheel-flower__ring--inner {
+    background: #0b1012;
+  }
+
+  .color-wheel-flower__picker {
+    position: relative;
+    z-index: 10;
+    width: calc(100% - 5px);
+    height: calc(100% - 5px);
+    border-radius: 9999px;
+    display: block;
+  }
+
+  .color-wheel-flower__dot {
+    position: absolute;
+    transform: translate(-50%, -50%);
+  }
+
+  .color-wheel-flower__dot-frame {
+    position: relative;
+    width: 32px;
+    height: 32px;
+  }
+
+  .color-wheel-flower__dot-motion {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    will-change: transform, opacity;
+  }
+
+  .color-wheel-flower__halo {
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    right: -5px;
+    bottom: -5px;
+    border-radius: 9999px;
+    pointer-events: none;
+    background: radial-gradient(
+      circle,
+      rgb(255 255 255 / 25%) 0%,
+      rgb(255 255 255 / 0%) 70%
+    );
+  }
+
+  .color-wheel-flower__swatch {
+    position: relative !important;
+    z-index: 10;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 9999px !important;
+    background: var(--color-swatch-current) !important;
+    transform: none !important;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 25%) !important;
+    transition: box-shadow 200ms ease-out, opacity 140ms ease-out !important;
+  }
+
+  .color-wheel-flower__swatch:hover:not([data-disabled="true"]) {
+    transform: none !important;
+    box-shadow: 0 3px 10px rgb(0 0 0 / 25%) !important;
+  }
+
+  .color-wheel-flower__swatch[data-selected="true"] {
+    box-shadow:
+      0 0 0 2px rgb(255 255 255 / 55%),
+      0 3px 10px rgb(0 0 0 / 25%) !important;
+  }
+
+  .color-wheel-flower__swatch:focus-visible,
+  .color-wheel-flower__swatch[data-focus-visible="true"] {
+    box-shadow:
+      0 0 0 2px rgb(255 255 255 / 50%),
+      0 3px 10px rgb(0 0 0 / 25%) !important;
+  }
+
+  .color-wheel-flower__swatch--center {
+    box-shadow:
+      inset 0 0 0 1px rgb(0 0 0 / 30%),
+      0 2px 8px rgb(0 0 0 / 25%) !important;
+  }
+
+  .color-wheel-flower__highlight {
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+    border: 2px solid rgb(255 255 255 / 100%);
+    mix-blend-mode: overlay;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 300ms ease-out, box-shadow 300ms ease-out;
+  }
+
+  .color-wheel-flower__highlight--hovered {
+    opacity: 0.75;
+    box-shadow: 0 0 6px rgb(255 255 255 / 45%);
+  }
+
+  .color-wheel-flower__highlight--pulsing {
+    opacity: 0.45;
+    box-shadow: 0 0 4px rgb(255 255 255 / 35%);
+  }
+}

package/dist/components/color-wheel-flower/ColorWheelFlower.d.ts

@@ -0,0 +1,8 @@
+import "./ColorWheelFlower.css";
+import { type JSX } from "solid-js";
+export interface ColorWheelFlowerProps {
+    class?: string;
+    className?: string;
+}
+declare const ColorWheelFlower: (props: ColorWheelFlowerProps) => JSX.Element;
+export default ColorWheelFlower;