@brightspot/ui 1.0.1-3 → 1.0.1-wc.1
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/README.md +75 -47
- package/custom-elements.json +214 -0
- package/dist/LucideDynamicLoader.d.ts +5 -0
- package/dist/LucideDynamicLoader.d.ts.map +1 -0
- package/dist/LucideDynamicLoader.js +2 -1
- package/dist/LucideDynamicLoader.js.map +1 -0
- package/dist/LucideDynamicLoader.ts +1 -1
- package/dist/components/widget/Widget.css +118 -0
- package/dist/components/widget/Widget.d.ts +90 -0
- package/dist/components/widget/Widget.d.ts.map +1 -0
- package/dist/components/widget/Widget.js +195 -0
- package/dist/components/widget/Widget.js.map +1 -0
- package/dist/components/widget/WidgetUtils.d.ts +14 -0
- package/dist/components/widget/WidgetUtils.d.ts.map +1 -0
- package/dist/components/widget/WidgetUtils.js +42 -0
- package/dist/components/widget/WidgetUtils.js.map +1 -0
- package/dist/global.d.ts +14 -0
- package/dist/storybook/assets/{Badge.stories-Dm-U1QYO.js → Badge.stories-BVaCGD8W.js} +3 -7
- package/dist/storybook/assets/{Button.stories-1cb_EUIC.js → Button.stories-C0BmUO4_.js} +2 -2
- package/dist/storybook/assets/Color-64QXVMR3-zezFbyuS.js +1 -0
- package/dist/storybook/assets/Colors.stories-CYFhcW5P.js +83 -0
- package/dist/storybook/assets/{Heading.stories-tM9cqImg.js → Heading.stories-8LPqm3WW.js} +1 -1
- package/dist/storybook/assets/{Icon.stories-BA6Sc9w5.js → Icon.stories-CpupdzrH.js} +1592 -9552
- package/dist/storybook/assets/Loader.stories-D0mnY_Z0.js +3 -0
- package/dist/storybook/assets/{ScrollShadow.stories-DKIcTQ1r.js → ScrollShadow.stories-BB4wF3c9.js} +1 -1
- package/dist/storybook/assets/Widget-CRTwFkFc.css +1 -0
- package/dist/storybook/assets/Widget.stories-yw3AloF5.js +323 -0
- package/dist/storybook/assets/WithTooltip-SK46ZJ2J-bOrMS36j.js +825 -0
- package/dist/storybook/assets/formatter-OMEEQ6HG-D2EXmNwo.js +1 -0
- package/dist/storybook/assets/iframe-BdHEYpHD.css +1 -0
- package/dist/storybook/assets/iframe-C5bTYo4K.js +1077 -0
- package/dist/storybook/assets/index-BLdw66Ec.js +1 -0
- package/dist/storybook/assets/syntaxhighlighter-CAVLW7PM-yrojVZDo.js +6 -0
- package/dist/storybook/iframe.html +4 -4
- package/dist/storybook/index.html +2 -13
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/sb-addons/docs-1/manager-bundle.js +1 -149
- package/dist/storybook/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +158 -323
- package/dist/storybook/sb-manager/globals-runtime.js +79814 -65954
- package/dist/storybook/sb-manager/globals.js +7 -16
- package/dist/storybook/sb-manager/runtime.js +15451 -9508
- package/dist/storybook/vite-inject-mocker-entry.js +1 -17
- package/dist/tailwind-plugin-badge.d.ts +2 -0
- package/dist/tailwind-plugin-badge.d.ts.map +1 -0
- package/dist/tailwind-plugin-badge.js +4 -3
- package/dist/tailwind-plugin-badge.js.map +1 -0
- package/dist/tailwind-plugin-badge.ts +4 -4
- package/dist/tailwind-plugin-button.d.ts +2 -0
- package/dist/tailwind-plugin-button.d.ts.map +1 -0
- package/dist/tailwind-plugin-button.js +20 -4
- package/dist/tailwind-plugin-button.js.map +1 -0
- package/dist/tailwind-plugin-button.ts +26 -20
- package/dist/tailwind-plugin-heading.d.ts +2 -0
- package/dist/tailwind-plugin-heading.d.ts.map +1 -0
- package/dist/tailwind-plugin-heading.js +1 -0
- package/dist/tailwind-plugin-heading.js.map +1 -0
- package/dist/tailwind-plugin-icon.d.ts +2 -0
- package/dist/tailwind-plugin-icon.d.ts.map +1 -0
- package/dist/tailwind-plugin-icon.js +15 -6
- package/dist/tailwind-plugin-icon.js.map +1 -0
- package/dist/tailwind-plugin-icon.ts +14 -7
- package/dist/tailwind-plugin-loader.d.ts +2 -0
- package/dist/tailwind-plugin-loader.d.ts.map +1 -0
- package/dist/tailwind-plugin-loader.js +1 -0
- package/dist/tailwind-plugin-loader.js.map +1 -0
- package/dist/tailwind-plugin-scroll-shadow.d.ts +2 -0
- package/dist/tailwind-plugin-scroll-shadow.d.ts.map +1 -0
- package/dist/tailwind-plugin-scroll-shadow.js +17 -2
- package/dist/tailwind-plugin-scroll-shadow.js.map +1 -0
- package/dist/tailwind-plugin-scroll-shadow.ts +34 -23
- package/dist/tailwind-plugin-theme.d.ts +2 -0
- package/dist/tailwind-plugin-theme.d.ts.map +1 -0
- package/dist/tailwind-plugin-theme.js +2 -3
- package/dist/tailwind-plugin-theme.js.map +1 -0
- package/dist/tailwind-plugin-theme.ts +5 -15
- package/dist/tailwind.config.d.ts +693 -0
- package/dist/tailwind.config.d.ts.map +1 -0
- package/dist/tailwind.config.js +6 -5
- package/dist/tailwind.config.js.map +1 -0
- package/dist/tailwind.config.ts +22 -14
- package/dist/util/string.d.ts +3 -0
- package/dist/util/string.d.ts.map +1 -0
- package/dist/util/string.js +2 -1
- package/dist/util/string.js.map +1 -0
- package/dist/util/svg.d.ts +3 -0
- package/dist/util/svg.d.ts.map +1 -0
- package/dist/util/svg.js +1 -0
- package/dist/util/svg.js.map +1 -0
- package/dist/utils/EventEmitterMixin.d.ts +62 -0
- package/dist/utils/EventEmitterMixin.d.ts.map +1 -0
- package/dist/utils/EventEmitterMixin.js +74 -0
- package/dist/utils/EventEmitterMixin.js.map +1 -0
- package/package.json +39 -17
- package/dist/storybook/assets/Color-AVL7NMMY-B58ga_hP.js +0 -1
- package/dist/storybook/assets/Colors.stories-BiV2pS3d.js +0 -79
- package/dist/storybook/assets/DocsRenderer-PQXLIZUC-DUVRw1oS.js +0 -1286
- package/dist/storybook/assets/Loader.stories-u1BnpDyi.js +0 -7
- package/dist/storybook/assets/iframe-BOWLMAWm.css +0 -1
- package/dist/storybook/assets/iframe-DT_nhsJu.js +0 -1057
- package/dist/storybook/assets/index-BTdkSEv_.js +0 -1
- package/dist/storybook/sb-manager/globals-module-info.js +0 -797
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
9
|
+
import { EventEmitterMixin } from '../../utils/EventEmitterMixin';
|
|
10
|
+
import { getComponentKey, ifUnmodified } from './WidgetUtils';
|
|
11
|
+
const ls = window.localStorage;
|
|
12
|
+
const collapseTooltip = window.BRIGHTSPOT?.ui?.tooltips?.collapse || 'Collapse';
|
|
13
|
+
const expandTooltip = window.BRIGHTSPOT?.ui?.tooltips?.expand || 'Expand';
|
|
14
|
+
/**
|
|
15
|
+
* A collapsible container component with persistent state management.
|
|
16
|
+
*
|
|
17
|
+
* Provides collapsible behavior with localStorage persistence, keyboard
|
|
18
|
+
* accessibility, and automatic error expansion. Uses CSS Grid layout with
|
|
19
|
+
* named columns for flexible content positioning.
|
|
20
|
+
*
|
|
21
|
+
* @element btu-widget
|
|
22
|
+
*
|
|
23
|
+
* @fires {CustomEvent} btu-brightspot-element-connected - Inherited from EventEmitterMixin, fired when element connects to DOM
|
|
24
|
+
* @fires {CustomEvent} btu-brightspot-element-disconnected - Inherited from EventEmitterMixin, fired when element disconnects from DOM
|
|
25
|
+
* @fires {CustomEvent<{error: Error}>} btu-brightspot-element-error - Inherited from EventEmitterMixin, fired on connection error
|
|
26
|
+
* @fires {CustomEvent} btu-widget-ready - Fired after first render and initialization
|
|
27
|
+
* @fires {CustomEvent<{collapsed: boolean}>} btu-widget-toggle - Fired when collapse state changes
|
|
28
|
+
*
|
|
29
|
+
* @slot - Default slot for widget content
|
|
30
|
+
*
|
|
31
|
+
* @cssprop --space - Horizontal padding for grid columns (default: theme(spacing.6))
|
|
32
|
+
* @cssprop --Widget-padding - Internal padding variable (default: var(--gap-l))
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```html
|
|
36
|
+
* <btu-widget
|
|
37
|
+
* collapsible
|
|
38
|
+
* heading="My Widget"
|
|
39
|
+
* internalname="example"
|
|
40
|
+
* widgetid="widget-001">
|
|
41
|
+
* <p>Widget content goes here</p>
|
|
42
|
+
* </btu-widget>
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
let Widget = class Widget extends EventEmitterMixin(LitElement) {
|
|
46
|
+
constructor() {
|
|
47
|
+
super(...arguments);
|
|
48
|
+
this._collapsed = false;
|
|
49
|
+
/**
|
|
50
|
+
* Enable collapsible behavior with expand/collapse controls.
|
|
51
|
+
* When enabled, displays a chevron icon and allows users to toggle content visibility.
|
|
52
|
+
* @attr
|
|
53
|
+
*/
|
|
54
|
+
this.collapsible = false;
|
|
55
|
+
/**
|
|
56
|
+
* Internal state tracking whether widget contains error messages.
|
|
57
|
+
* Widget automatically expands when errors are detected.
|
|
58
|
+
* @private
|
|
59
|
+
*/
|
|
60
|
+
this.invalid = false;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Controls the collapsed state of the widget.
|
|
64
|
+
* When set, persists to localStorage and emits btu-widget-toggle event.
|
|
65
|
+
* @attr
|
|
66
|
+
*/
|
|
67
|
+
set collapsed(isCollapsed) {
|
|
68
|
+
this._collapsed = isCollapsed;
|
|
69
|
+
const key = getComponentKey(this, 'data-internal-name');
|
|
70
|
+
if (key) {
|
|
71
|
+
if (isCollapsed) {
|
|
72
|
+
ls.setItem(key, '1');
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
ls.removeItem(key);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
this.requestUpdate();
|
|
79
|
+
this.emit('btu-widget-toggle');
|
|
80
|
+
}
|
|
81
|
+
get collapsed() {
|
|
82
|
+
return this._collapsed;
|
|
83
|
+
}
|
|
84
|
+
connectedCallback() {
|
|
85
|
+
super.connectedCallback();
|
|
86
|
+
const key = getComponentKey(this, 'data-internal-name');
|
|
87
|
+
this.collapsed = key && ls.getItem(key) ? true : false;
|
|
88
|
+
}
|
|
89
|
+
createRenderRoot() {
|
|
90
|
+
return this;
|
|
91
|
+
}
|
|
92
|
+
firstUpdated() {
|
|
93
|
+
this.emit('btu-widget-ready');
|
|
94
|
+
this.invalid = this.querySelector('.Message.is-error') != null;
|
|
95
|
+
if (!this.collapsible || this.invalid) {
|
|
96
|
+
this.collapsed = false;
|
|
97
|
+
}
|
|
98
|
+
const widgetTitle = this.querySelector('.Widget-title');
|
|
99
|
+
// Ensures that the title is always the first child of the widget.
|
|
100
|
+
const firstChild = this.firstChild;
|
|
101
|
+
if (firstChild instanceof Element && !firstChild.classList.contains('Widget-title')) {
|
|
102
|
+
if (widgetTitle) {
|
|
103
|
+
this.insertBefore(widgetTitle, firstChild);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
// Hide all children added after render of the widget if it is collapsed
|
|
107
|
+
this.querySelectorAll(':scope > :not(.Widget-title, script, select)').forEach(el => {
|
|
108
|
+
el.toggleAttribute('hidden', this.collapsed && !this.invalid);
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
_collapsibleTemplate() {
|
|
112
|
+
return html `<h2
|
|
113
|
+
class="Widget-title ${this.invalid
|
|
114
|
+
? 'text-error-600'
|
|
115
|
+
: ''} btu-heading-5 sticky top-0 z-10 cursor-pointer overflow-x-clip text-ellipsis whitespace-nowrap border-b border-b-gray-200 bg-white px-[--space] py-3.5 text-gray-900 [grid-column:fullbleed-start_/_fullbleed-end] hover:bg-gray-100 focus:ring-0"
|
|
116
|
+
@click="${() => (this.collapsed = !this.collapsed)}"
|
|
117
|
+
>
|
|
118
|
+
<div
|
|
119
|
+
class="Widget-expand ${this.invalid
|
|
120
|
+
? 'after:btu-icon after:btu-icon-circle-alert after:text-error-600'
|
|
121
|
+
: ''} relative inline-flex w-full items-center gap-2 focus:ring-0"
|
|
122
|
+
role="button"
|
|
123
|
+
tabindex="0"
|
|
124
|
+
aria-expanded=${!this.collapsed}
|
|
125
|
+
title=${this.collapsed ? expandTooltip : collapseTooltip}
|
|
126
|
+
@keydown=${ifUnmodified((e) => {
|
|
127
|
+
if (e instanceof KeyboardEvent) {
|
|
128
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
129
|
+
e.preventDefault();
|
|
130
|
+
this.collapsed = !this.collapsed;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
})}
|
|
134
|
+
>
|
|
135
|
+
${this.heading}
|
|
136
|
+
<ul
|
|
137
|
+
class="Widget-controls sticky top-0 z-[11] order-2 ms-auto flex items-center gap-2 border-b-0 border-b-gray-200 bg-inherit empty:hidden"
|
|
138
|
+
aria-hidden="true"
|
|
139
|
+
>
|
|
140
|
+
<li
|
|
141
|
+
class="Widget-collapse btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-chevron-up ${this
|
|
142
|
+
.collapsed
|
|
143
|
+
? 'before:rotate-180'
|
|
144
|
+
: ''} before:transition-transform"
|
|
145
|
+
title="${this.collapsed ? expandTooltip : collapseTooltip}"
|
|
146
|
+
></li>
|
|
147
|
+
</ul>
|
|
148
|
+
</div>
|
|
149
|
+
</h2>`;
|
|
150
|
+
}
|
|
151
|
+
render() {
|
|
152
|
+
this.classList.add('widget', 'Widget', 'relative', 'grid', 'bg-white');
|
|
153
|
+
// Add the collapsible class if the widget can be collapsible.
|
|
154
|
+
this.classList.toggle('is-collapsible', this.collapsible);
|
|
155
|
+
this.classList.toggle('is-collapsed', this.collapsed);
|
|
156
|
+
if (this.collapsed)
|
|
157
|
+
this.classList.add('overflow-clip', 'border-b-0', 'pb-0');
|
|
158
|
+
// If there are error messages, expand the widget.
|
|
159
|
+
this.classList.toggle('is-error', this.invalid);
|
|
160
|
+
// Hide all children of the widget if it is collapsed.
|
|
161
|
+
this.querySelectorAll(':scope > :not(.Widget-title, script, select)').forEach(el => {
|
|
162
|
+
el.toggleAttribute('hidden', this.collapsed);
|
|
163
|
+
});
|
|
164
|
+
if (this.collapsible) {
|
|
165
|
+
this.classList.add('h-[min-content]');
|
|
166
|
+
return this._collapsibleTemplate();
|
|
167
|
+
}
|
|
168
|
+
else {
|
|
169
|
+
return html `<h2 class="Widget-title ${this.invalid ? 'text-error-600' : ''}">${this.heading}</h2>`;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
__decorate([
|
|
174
|
+
property({ type: Boolean })
|
|
175
|
+
], Widget.prototype, "collapsible", void 0);
|
|
176
|
+
__decorate([
|
|
177
|
+
property({ type: String })
|
|
178
|
+
], Widget.prototype, "heading", void 0);
|
|
179
|
+
__decorate([
|
|
180
|
+
property({ type: String })
|
|
181
|
+
], Widget.prototype, "internalname", void 0);
|
|
182
|
+
__decorate([
|
|
183
|
+
state()
|
|
184
|
+
], Widget.prototype, "invalid", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
property({ type: String })
|
|
187
|
+
], Widget.prototype, "widgetid", void 0);
|
|
188
|
+
__decorate([
|
|
189
|
+
property({ type: Boolean })
|
|
190
|
+
], Widget.prototype, "collapsed", null);
|
|
191
|
+
Widget = __decorate([
|
|
192
|
+
customElement('btu-widget')
|
|
193
|
+
], Widget);
|
|
194
|
+
export default Widget;
|
|
195
|
+
//# sourceMappingURL=Widget.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Widget.js","sourceRoot":"","sources":["../../../src/components/widget/Widget.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generates a localStorage key for widget collapse state persistence.
|
|
3
|
+
* @param component - The component element (typically btu-widget)
|
|
4
|
+
* @param nameAttribute - The attribute name to read for component name
|
|
5
|
+
* @returns localStorage key in format: BSP.ContentEdit.widgetCollapsed.{typeId}.{componentName}
|
|
6
|
+
*/
|
|
7
|
+
export declare function getComponentKey(component: HTMLElement, nameAttribute: string): string | null;
|
|
8
|
+
/**
|
|
9
|
+
* Higher-order function that executes a callback only if keyboard event has no modifier keys.
|
|
10
|
+
* @param fn - Function to execute if event is unmodified
|
|
11
|
+
* @returns Wrapped function that checks for modifiers before executing
|
|
12
|
+
*/
|
|
13
|
+
export declare function ifUnmodified(fn: (...args: unknown[]) => unknown): (...args: unknown[]) => void;
|
|
14
|
+
//# sourceMappingURL=WidgetUtils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WidgetUtils.d.ts","sourceRoot":"","sources":["../../../src/components/widget/WidgetUtils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkB5F;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,IAC7C,GAAG,MAAM,OAAO,EAAE,UASpC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generates a localStorage key for widget collapse state persistence.
|
|
3
|
+
* @param component - The component element (typically btu-widget)
|
|
4
|
+
* @param nameAttribute - The attribute name to read for component name
|
|
5
|
+
* @returns localStorage key in format: BSP.ContentEdit.widgetCollapsed.{typeId}.{componentName}
|
|
6
|
+
*/
|
|
7
|
+
export function getComponentKey(component, nameAttribute) {
|
|
8
|
+
const edit = component.closest('.ContentEdit') || component.closest('btu-widget');
|
|
9
|
+
if (!edit)
|
|
10
|
+
return null;
|
|
11
|
+
let typeId;
|
|
12
|
+
let componentName;
|
|
13
|
+
if (edit.classList.contains('ContentEdit')) {
|
|
14
|
+
typeId = edit.getAttribute('data-type-id');
|
|
15
|
+
componentName = component.getAttribute(nameAttribute);
|
|
16
|
+
if (!typeId || !componentName)
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
else if (edit instanceof HTMLElement) {
|
|
20
|
+
typeId = edit.getAttribute('widgetid');
|
|
21
|
+
componentName = edit.getAttribute('internalname');
|
|
22
|
+
if (!typeId || !componentName)
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
return typeId && componentName ? `BSP.ContentEdit.widgetCollapsed.${typeId}.${componentName}` : null;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Higher-order function that executes a callback only if keyboard event has no modifier keys.
|
|
29
|
+
* @param fn - Function to execute if event is unmodified
|
|
30
|
+
* @returns Wrapped function that checks for modifiers before executing
|
|
31
|
+
*/
|
|
32
|
+
export function ifUnmodified(fn) {
|
|
33
|
+
return function (...args) {
|
|
34
|
+
if (args[0] instanceof KeyboardEvent) {
|
|
35
|
+
const event = args[0];
|
|
36
|
+
if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
|
|
37
|
+
fn.apply(event.target, args);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=WidgetUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WidgetUtils.js","sourceRoot":"","sources":["../../../src/components/widget/WidgetUtils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,SAAsB,EAAE,aAAqB;IAC3E,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;IACjF,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAEtB,IAAI,MAAM,CAAA;IACV,IAAI,aAAa,CAAA;IAEjB,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;QAC3C,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;QAC1C,aAAa,GAAG,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,CAAA;QACrD,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;YAAE,OAAO,IAAI,CAAA;IAC5C,CAAC;SAAM,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;QACvC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;QACtC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;QACjD,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;YAAE,OAAO,IAAI,CAAA;IAC5C,CAAC;IAED,OAAO,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,mCAAmC,MAAM,IAAI,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;AACtG,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAmC;IAC9D,OAAO,UAAU,GAAG,IAAe;QACjC,IAAI,IAAI,CAAC,CAAC,CAAC,YAAY,aAAa,EAAE,CAAC;YACrC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;YAErB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACzE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;YAC9B,CAAC;QACH,CAAC;IACH,CAAC,CAAA;AACH,CAAC"}
|
package/dist/global.d.ts
ADDED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import{x as i}from"./iframe-
|
|
1
|
+
import{x as i}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";const p=({color:e="gray",affordance:a,size:u="sm",customForegroundColor:n,customBackgroundColor:c,label:g})=>{let l=!1,d=!1;a==="dot"?l=!0:a==="icon"&&(d=!0);const o=[];return n&&o.push(`--badge-color-foreground: ${n}`),c&&o.push(`--badge-color-background: ${c}`),i`
|
|
2
2
|
<span
|
|
3
3
|
class=${["btu-badge",`btu-badge-${u}`,`btu-badge-${e}`,l?"before:size-2 before:rounded-lg before:bg-[currentColor]":"",d?"before:btu-icon before:btu-icon-xs before:btu-icon-salad":""].join(" ")}
|
|
4
4
|
style=${o.length>0?o.join("; "):""}
|
|
5
5
|
>
|
|
6
6
|
${g}
|
|
7
7
|
</span>
|
|
8
|
-
`},m=["black","white","primary","teal","gray","purple","rose","error","warning","success"],f={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"btu-badge"},controls:{expanded:!0}},render:e=>p(e),argTypes:{color:{control:{type:"select"},options:m},affordance:{control:{type:"select"},options:["dot","icon"],description:"Display a design affordance next to the label"},size:{control:{type:"select"},options:["sm","md","lg"]},customForegroundColor:{control:{type:"color"},description:"Custom foreground (text) color - overrides the theme color"},customBackgroundColor:{control:{type:"color"},description:"Custom background color - overrides the theme color"}},args:{color:"purple",affordance:"dot",size:"sm",customForegroundColor:"",customBackgroundColor:"",label:"Badge"}},r={args:{}},s={args:{color:"primary",size:"lg",label:"Custom Colors Badge",customForegroundColor:"#a04b4b",customBackgroundColor:"#dce34d"},parameters:{docs:{description:{story:"Badge supports custom colors using the btu-badge-foreground and btu-badge-background utilities. Setting these values will override any theme colors."}}}},t={args:{color:"success",size:"lg",label:"Linked Badge"},decorators:[e=>i`<a
|
|
9
|
-
href="#"
|
|
10
|
-
class="inline-flex items-center gap-2 hover:text-primary hover:underline"
|
|
8
|
+
`},m=["black","white","primary","teal","gray","purple","rose","error","warning","success"],f={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"btu-badge"},controls:{expanded:!0}},render:e=>p(e),argTypes:{color:{control:{type:"select"},options:m},affordance:{control:{type:"select"},options:["dot","icon"],description:"Display a design affordance next to the label"},size:{control:{type:"select"},options:["sm","md","lg"]},customForegroundColor:{control:{type:"color"},description:"Custom foreground (text) color - overrides the theme color"},customBackgroundColor:{control:{type:"color"},description:"Custom background color - overrides the theme color"}},args:{color:"purple",affordance:"dot",size:"sm",customForegroundColor:"",customBackgroundColor:"",label:"Badge"}},r={args:{}},s={args:{color:"primary",size:"lg",label:"Custom Colors Badge",customForegroundColor:"#a04b4b",customBackgroundColor:"#dce34d"},parameters:{docs:{description:{story:"Badge supports custom colors using the btu-badge-foreground and btu-badge-background utilities. Setting these values will override any theme colors."}}}},t={args:{color:"success",size:"lg",label:"Linked Badge"},decorators:[e=>i`<a href="#" class="hover:text-primary inline-flex items-center gap-2 hover:underline"
|
|
11
9
|
>Hover over me to see the ${e()} in action.</a
|
|
12
10
|
>`],parameters:{docs:{description:{story:"Badges inside anchor elements automatically handle underlines properly. The underline uses the badge background color instead of the default link color, ensuring proper visual hierarchy when badges are used as clickable elements."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
13
11
|
args: {}
|
|
@@ -32,9 +30,7 @@ import{x as i}from"./iframe-DT_nhsJu.js";import"./preload-helper-PPVm8Dsz.js";co
|
|
|
32
30
|
size: 'lg',
|
|
33
31
|
label: 'Linked Badge'
|
|
34
32
|
},
|
|
35
|
-
decorators: [story => html\`<a
|
|
36
|
-
href="#"
|
|
37
|
-
class="inline-flex items-center gap-2 hover:text-primary hover:underline"
|
|
33
|
+
decorators: [story => html\`<a href="#" class="hover:text-primary inline-flex items-center gap-2 hover:underline"
|
|
38
34
|
>Hover over me to see the \${story()} in action.</a
|
|
39
35
|
>\`],
|
|
40
36
|
parameters: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{x as v}from"./iframe-
|
|
1
|
+
import{x as v}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";const I=({color:r="primary",pressed:a,fill:i,contained:c,outlined:l,size:d="sm",label:u,icon:b,hideText:p,disabled:m})=>{const g=i?"":"btu-button-fill-none",y=c?"":"btu-button-container-none",h=l?"btu-button-outline":"",f=p?"btu-button-text-hidden":"",x=b?["before:btu-icon","before:btu-icon-smile"]:[];return v`
|
|
2
2
|
<button
|
|
3
3
|
type="button"
|
|
4
4
|
class=${["btu-button",`btu-button-${r}`,`btu-button-${d}`,g,y,h,f,...x].join(" ")}
|
|
@@ -7,7 +7,7 @@ import{x as v}from"./iframe-DT_nhsJu.js";import"./preload-helper-PPVm8Dsz.js";co
|
|
|
7
7
|
>
|
|
8
8
|
${u}
|
|
9
9
|
</button>
|
|
10
|
-
`},B=["black","white","primary","teal","gray","purple","rose","error","warning","success"],S={title:"Components/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button"},controls:{expanded:!0}},render:r=>I(r),argTypes:{color:{control:{type:"select"},options:B},contained:{control:{type:"boolean"},description:"Does the button have a container?"},disabled:{control:{type:"boolean"},description:"Is the button disabled?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},hideText:{control:{type:"boolean"},description:"Icon only mode (hides label)"},icon:{table:{disable:!0}},label:{control:{type:"text"},description:"Button label text"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]}},args:{color:"primary",contained:!0,disabled:!1,fill:!0,hideText:!1,icon:"",label:"Button",outlined:!1,pressed:!1,size:"md"}},e={args:{}},t={args:{label:"Search",icon:"before:btu-icon-smile"},parameters:{docs:{description:{story:"Button with an icon alongside text."}}}},o={args:{icon:"before:btu-icon-smile",hideText:!0},parameters:{docs:{description:{story:"Icon-only button. Uses `btu-button-text-hidden` to hide the label."}}}},s={args:{label:"Disabled Button",disabled:!0},parameters:{docs:{description:{story:"Disabled button state. Uses the `[disabled]` attribute to trigger disabled styling with reduced opacity and pointer events disabled."}}}},n={args:{label:"Active Button",pressed:!0,fill:!1,icon:"before:btu-icon-smile",hideText:!0},parameters:{docs:{description:{story:'Active/pressed button state. Uses `[aria-pressed="true"]` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.'}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
|
10
|
+
`},B=["ai","black","white","primary","teal","gray","purple","rose","error","warning","success"],S={title:"Components/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button"},controls:{expanded:!0}},render:r=>I(r),argTypes:{color:{control:{type:"select"},options:B},contained:{control:{type:"boolean"},description:"Does the button have a container?"},disabled:{control:{type:"boolean"},description:"Is the button disabled?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},hideText:{control:{type:"boolean"},description:"Icon only mode (hides label)"},icon:{table:{disable:!0}},label:{control:{type:"text"},description:"Button label text"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]}},args:{color:"primary",contained:!0,disabled:!1,fill:!0,hideText:!1,icon:"",label:"Button",outlined:!1,pressed:!1,size:"md"}},e={args:{}},t={args:{label:"Search",icon:"before:btu-icon-smile"},parameters:{docs:{description:{story:"Button with an icon alongside text."}}}},o={args:{icon:"before:btu-icon-smile",hideText:!0},parameters:{docs:{description:{story:"Icon-only button. Uses `btu-button-text-hidden` to hide the label."}}}},s={args:{label:"Disabled Button",disabled:!0},parameters:{docs:{description:{story:"Disabled button state. Uses the `[disabled]` attribute to trigger disabled styling with reduced opacity and pointer events disabled."}}}},n={args:{label:"Active Button",pressed:!0,fill:!1,icon:"before:btu-icon-smile",hideText:!0},parameters:{docs:{description:{story:'Active/pressed button state. Uses `[aria-pressed="true"]` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.'}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
|
11
11
|
args: {}
|
|
12
12
|
}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
|
13
13
|
args: {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as x,R as b,s as E,W as J,g as me,T as ye,F as xe,M as we}from"./WithTooltip-SK46ZJ2J-bOrMS36j.js";import{_ as d,a as ke,b as q}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";var _e=q({"../../node_modules/color-name/index.js"(t,l){l.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),Q=q({"../../node_modules/color-convert/conversions.js"(t,l){var i=_e(),f={};for(const e of Object.keys(i))f[i[e]]=e;var s={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};l.exports=s;for(const e of Object.keys(s)){if(!("channels"in s[e]))throw new Error("missing channels property: "+e);if(!("labels"in s[e]))throw new Error("missing channel labels property: "+e);if(s[e].labels.length!==s[e].channels)throw new Error("channel and label counts mismatch: "+e);const{channels:r,labels:n}=s[e];delete s[e].channels,delete s[e].labels,Object.defineProperty(s[e],"channels",{value:r}),Object.defineProperty(s[e],"labels",{value:n})}s.rgb.hsl=function(e){const r=e[0]/255,n=e[1]/255,o=e[2]/255,a=Math.min(r,n,o),c=Math.max(r,n,o),u=c-a;let h,g;c===a?h=0:r===c?h=(n-o)/u:n===c?h=2+(o-r)/u:o===c&&(h=4+(r-n)/u),h=Math.min(h*60,360),h<0&&(h+=360);const p=(a+c)/2;return c===a?g=0:p<=.5?g=u/(c+a):g=u/(2-c-a),[h,g*100,p*100]},s.rgb.hsv=function(e){let r,n,o,a,c;const u=e[0]/255,h=e[1]/255,g=e[2]/255,p=Math.max(u,h,g),y=p-Math.min(u,h,g),m=d(function(_){return(p-_)/6/y+1/2},"diffc");return y===0?(a=0,c=0):(c=y/p,r=m(u),n=m(h),o=m(g),u===p?a=o-n:h===p?a=1/3+r-o:g===p&&(a=2/3+n-r),a<0?a+=1:a>1&&(a-=1)),[a*360,c*100,p*100]},s.rgb.hwb=function(e){const r=e[0],n=e[1];let o=e[2];const a=s.rgb.hsl(e)[0],c=1/255*Math.min(r,Math.min(n,o));return o=1-1/255*Math.max(r,Math.max(n,o)),[a,c*100,o*100]},s.rgb.cmyk=function(e){const r=e[0]/255,n=e[1]/255,o=e[2]/255,a=Math.min(1-r,1-n,1-o),c=(1-r-a)/(1-a)||0,u=(1-n-a)/(1-a)||0,h=(1-o-a)/(1-a)||0;return[c*100,u*100,h*100,a*100]};function v(e,r){return(e[0]-r[0])**2+(e[1]-r[1])**2+(e[2]-r[2])**2}d(v,"comparativeDistance"),s.rgb.keyword=function(e){const r=f[e];if(r)return r;let n=1/0,o;for(const a of Object.keys(i)){const c=i[a],u=v(e,c);u<n&&(n=u,o=a)}return o},s.keyword.rgb=function(e){return i[e]},s.rgb.xyz=function(e){let r=e[0]/255,n=e[1]/255,o=e[2]/255;r=r>.04045?((r+.055)/1.055)**2.4:r/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,o=o>.04045?((o+.055)/1.055)**2.4:o/12.92;const a=r*.4124+n*.3576+o*.1805,c=r*.2126+n*.7152+o*.0722,u=r*.0193+n*.1192+o*.9505;return[a*100,c*100,u*100]},s.rgb.lab=function(e){const r=s.rgb.xyz(e);let n=r[0],o=r[1],a=r[2];n/=95.047,o/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,o=o>.008856?o**(1/3):7.787*o+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;const c=116*o-16,u=500*(n-o),h=200*(o-a);return[c,u,h]},s.hsl.rgb=function(e){const r=e[0]/360,n=e[1]/100,o=e[2]/100;let a,c,u;if(n===0)return u=o*255,[u,u,u];o<.5?a=o*(1+n):a=o+n-o*n;const h=2*o-a,g=[0,0,0];for(let p=0;p<3;p++)c=r+1/3*-(p-1),c<0&&c++,c>1&&c--,6*c<1?u=h+(a-h)*6*c:2*c<1?u=a:3*c<2?u=h+(a-h)*(2/3-c)*6:u=h,g[p]=u*255;return g},s.hsl.hsv=function(e){const r=e[0];let n=e[1]/100,o=e[2]/100,a=n;const c=Math.max(o,.01);o*=2,n*=o<=1?o:2-o,a*=c<=1?c:2-c;const u=(o+n)/2,h=o===0?2*a/(c+a):2*n/(o+n);return[r,h*100,u*100]},s.hsv.rgb=function(e){const r=e[0]/60,n=e[1]/100;let o=e[2]/100;const a=Math.floor(r)%6,c=r-Math.floor(r),u=255*o*(1-n),h=255*o*(1-n*c),g=255*o*(1-n*(1-c));switch(o*=255,a){case 0:return[o,g,u];case 1:return[h,o,u];case 2:return[u,o,g];case 3:return[u,h,o];case 4:return[g,u,o];case 5:return[o,u,h]}},s.hsv.hsl=function(e){const r=e[0],n=e[1]/100,o=e[2]/100,a=Math.max(o,.01);let c,u;u=(2-n)*o;const h=(2-n)*a;return c=n*a,c/=h<=1?h:2-h,c=c||0,u/=2,[r,c*100,u*100]},s.hwb.rgb=function(e){const r=e[0]/360;let n=e[1]/100,o=e[2]/100;const a=n+o;let c;a>1&&(n/=a,o/=a);const u=Math.floor(6*r),h=1-o;c=6*r-u,(u&1)!==0&&(c=1-c);const g=n+c*(h-n);let p,y,m;switch(u){default:case 6:case 0:p=h,y=g,m=n;break;case 1:p=g,y=h,m=n;break;case 2:p=n,y=h,m=g;break;case 3:p=n,y=g,m=h;break;case 4:p=g,y=n,m=h;break;case 5:p=h,y=n,m=g;break}return[p*255,y*255,m*255]},s.cmyk.rgb=function(e){const r=e[0]/100,n=e[1]/100,o=e[2]/100,a=e[3]/100,c=1-Math.min(1,r*(1-a)+a),u=1-Math.min(1,n*(1-a)+a),h=1-Math.min(1,o*(1-a)+a);return[c*255,u*255,h*255]},s.xyz.rgb=function(e){const r=e[0]/100,n=e[1]/100,o=e[2]/100;let a,c,u;return a=r*3.2406+n*-1.5372+o*-.4986,c=r*-.9689+n*1.8758+o*.0415,u=r*.0557+n*-.204+o*1.057,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,c=c>.0031308?1.055*c**(1/2.4)-.055:c*12.92,u=u>.0031308?1.055*u**(1/2.4)-.055:u*12.92,a=Math.min(Math.max(0,a),1),c=Math.min(Math.max(0,c),1),u=Math.min(Math.max(0,u),1),[a*255,c*255,u*255]},s.xyz.lab=function(e){let r=e[0],n=e[1],o=e[2];r/=95.047,n/=100,o/=108.883,r=r>.008856?r**(1/3):7.787*r+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;const a=116*n-16,c=500*(r-n),u=200*(n-o);return[a,c,u]},s.lab.xyz=function(e){const r=e[0],n=e[1],o=e[2];let a,c,u;c=(r+16)/116,a=n/500+c,u=c-o/200;const h=c**3,g=a**3,p=u**3;return c=h>.008856?h:(c-16/116)/7.787,a=g>.008856?g:(a-16/116)/7.787,u=p>.008856?p:(u-16/116)/7.787,a*=95.047,c*=100,u*=108.883,[a,c,u]},s.lab.lch=function(e){const r=e[0],n=e[1],o=e[2];let a;a=Math.atan2(o,n)*360/2/Math.PI,a<0&&(a+=360);const u=Math.sqrt(n*n+o*o);return[r,u,a]},s.lch.lab=function(e){const r=e[0],n=e[1],a=e[2]/360*2*Math.PI,c=n*Math.cos(a),u=n*Math.sin(a);return[r,c,u]},s.rgb.ansi16=function(e,r=null){const[n,o,a]=e;let c=r===null?s.rgb.hsv(e)[2]:r;if(c=Math.round(c/50),c===0)return 30;let u=30+(Math.round(a/255)<<2|Math.round(o/255)<<1|Math.round(n/255));return c===2&&(u+=60),u},s.hsv.ansi16=function(e){return s.rgb.ansi16(s.hsv.rgb(e),e[2])},s.rgb.ansi256=function(e){const r=e[0],n=e[1],o=e[2];return r===n&&n===o?r<8?16:r>248?231:Math.round((r-8)/247*24)+232:16+36*Math.round(r/255*5)+6*Math.round(n/255*5)+Math.round(o/255*5)},s.ansi16.rgb=function(e){let r=e%10;if(r===0||r===7)return e>50&&(r+=3.5),r=r/10.5*255,[r,r,r];const n=(~~(e>50)+1)*.5,o=(r&1)*n*255,a=(r>>1&1)*n*255,c=(r>>2&1)*n*255;return[o,a,c]},s.ansi256.rgb=function(e){if(e>=232){const c=(e-232)*10+8;return[c,c,c]}e-=16;let r;const n=Math.floor(e/36)/5*255,o=Math.floor((r=e%36)/6)/5*255,a=r%6/5*255;return[n,o,a]},s.rgb.hex=function(e){const n=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(n.length)+n},s.hex.rgb=function(e){const r=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!r)return[0,0,0];let n=r[0];r[0].length===3&&(n=n.split("").map(h=>h+h).join(""));const o=parseInt(n,16),a=o>>16&255,c=o>>8&255,u=o&255;return[a,c,u]},s.rgb.hcg=function(e){const r=e[0]/255,n=e[1]/255,o=e[2]/255,a=Math.max(Math.max(r,n),o),c=Math.min(Math.min(r,n),o),u=a-c;let h,g;return u<1?h=c/(1-u):h=0,u<=0?g=0:a===r?g=(n-o)/u%6:a===n?g=2+(o-r)/u:g=4+(r-n)/u,g/=6,g%=1,[g*360,u*100,h*100]},s.hsl.hcg=function(e){const r=e[1]/100,n=e[2]/100,o=n<.5?2*r*n:2*r*(1-n);let a=0;return o<1&&(a=(n-.5*o)/(1-o)),[e[0],o*100,a*100]},s.hsv.hcg=function(e){const r=e[1]/100,n=e[2]/100,o=r*n;let a=0;return o<1&&(a=(n-o)/(1-o)),[e[0],o*100,a*100]},s.hcg.rgb=function(e){const r=e[0]/360,n=e[1]/100,o=e[2]/100;if(n===0)return[o*255,o*255,o*255];const a=[0,0,0],c=r%1*6,u=c%1,h=1-u;let g=0;switch(Math.floor(c)){case 0:a[0]=1,a[1]=u,a[2]=0;break;case 1:a[0]=h,a[1]=1,a[2]=0;break;case 2:a[0]=0,a[1]=1,a[2]=u;break;case 3:a[0]=0,a[1]=h,a[2]=1;break;case 4:a[0]=u,a[1]=0,a[2]=1;break;default:a[0]=1,a[1]=0,a[2]=h}return g=(1-n)*o,[(n*a[0]+g)*255,(n*a[1]+g)*255,(n*a[2]+g)*255]},s.hcg.hsv=function(e){const r=e[1]/100,n=e[2]/100,o=r+n*(1-r);let a=0;return o>0&&(a=r/o),[e[0],a*100,o*100]},s.hcg.hsl=function(e){const r=e[1]/100,o=e[2]/100*(1-r)+.5*r;let a=0;return o>0&&o<.5?a=r/(2*o):o>=.5&&o<1&&(a=r/(2*(1-o))),[e[0],a*100,o*100]},s.hcg.hwb=function(e){const r=e[1]/100,n=e[2]/100,o=r+n*(1-r);return[e[0],(o-r)*100,(1-o)*100]},s.hwb.hcg=function(e){const r=e[1]/100,o=1-e[2]/100,a=o-r;let c=0;return a<1&&(c=(o-a)/(1-a)),[e[0],a*100,c*100]},s.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},s.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},s.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},s.gray.hsl=function(e){return[0,0,e[0]]},s.gray.hsv=s.gray.hsl,s.gray.hwb=function(e){return[0,100,e[0]]},s.gray.cmyk=function(e){return[0,0,0,e[0]]},s.gray.lab=function(e){return[e[0],0,0]},s.gray.hex=function(e){const r=Math.round(e[0]/100*255)&255,o=((r<<16)+(r<<8)+r).toString(16).toUpperCase();return"000000".substring(o.length)+o},s.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),Me=q({"../../node_modules/color-convert/route.js"(t,l){var i=Q();function f(){const r={},n=Object.keys(i);for(let o=n.length,a=0;a<o;a++)r[n[a]]={distance:-1,parent:null};return r}d(f,"buildGraph");function s(r){const n=f(),o=[r];for(n[r].distance=0;o.length;){const a=o.pop(),c=Object.keys(i[a]);for(let u=c.length,h=0;h<u;h++){const g=c[h],p=n[g];p.distance===-1&&(p.distance=n[a].distance+1,p.parent=a,o.unshift(g))}}return n}d(s,"deriveBFS");function v(r,n){return function(o){return n(r(o))}}d(v,"link");function e(r,n){const o=[n[r].parent,r];let a=i[n[r].parent][r],c=n[r].parent;for(;n[c].parent;)o.unshift(n[c].parent),a=v(i[n[c].parent][c],a),c=n[c].parent;return a.conversion=o,a}d(e,"wrapConversion"),l.exports=function(r){const n=s(r),o={},a=Object.keys(n);for(let c=a.length,u=0;u<c;u++){const h=a[u];n[h].parent!==null&&(o[h]=e(h,n))}return o}}}),Ee=q({"../../node_modules/color-convert/index.js"(t,l){var i=Q(),f=Me(),s={},v=Object.keys(i);function e(n){const o=d(function(...a){const c=a[0];return c==null?c:(c.length>1&&(a=c),n(a))},"wrappedFn");return"conversion"in n&&(o.conversion=n.conversion),o}d(e,"wrapRaw");function r(n){const o=d(function(...a){const c=a[0];if(c==null)return c;c.length>1&&(a=c);const u=n(a);if(typeof u=="object")for(let h=u.length,g=0;g<h;g++)u[g]=Math.round(u[g]);return u},"wrappedFn");return"conversion"in n&&(o.conversion=n.conversion),o}d(r,"wrapRounded"),v.forEach(n=>{s[n]={},Object.defineProperty(s[n],"channels",{value:i[n].channels}),Object.defineProperty(s[n],"labels",{value:i[n].labels});const o=f(n);Object.keys(o).forEach(c=>{const u=o[c];s[n][c]=r(u),s[n][c].raw=e(u)})}),l.exports=s}}),M=ke(Ee());function Z(t,l,{signal:i,edges:f}={}){let s,v=null;const e=f!=null&&f.includes("leading"),r=f==null||f.includes("trailing"),n=d(()=>{v!==null&&(t.apply(s,v),s=void 0,v=null)},"invoke"),o=d(()=>{r&&n(),h()},"onTimerEnd");let a=null;const c=d(()=>{a!=null&&clearTimeout(a),a=setTimeout(()=>{a=null,o()},l)},"schedule"),u=d(()=>{a!==null&&(clearTimeout(a),a=null)},"cancelTimer"),h=d(()=>{u(),s=void 0,v=null},"cancel"),g=d(()=>{n()},"flush"),p=d(function(...y){if(i?.aborted)return;s=this,v=y;const m=a==null;c(),e&&m&&n()},"debounced");return p.schedule=c,p.cancel=h,p.flush=g,i?.addEventListener("abort",h,{once:!0}),p}d(Z,"debounce");function ee(t,...l){return te(t,ne,...l)}d(ee,"partial");function te(t,l,...i){const f=d(function(...s){let v=0;const e=i.slice().map(n=>n===l?s[v++]:n),r=s.slice(v);return t.apply(this,e.concat(r))},"partialed");return t.prototype&&(f.prototype=Object.create(t.prototype)),f}d(te,"partialImpl");var ne=Symbol("partial.placeholder");ee.placeholder=ne;function re(t,...l){return oe(t,ae,...l)}d(re,"partialRight");function oe(t,l,...i){const f=d(function(...s){const v=i.filter(a=>a===l).length,e=Math.max(s.length-v,0),r=s.slice(0,e);let n=e;const o=i.slice().map(a=>a===l?s[n++]:a);return t.apply(this,r.concat(o))},"partialedRight");return t.prototype&&(f.prototype=Object.create(t.prototype)),f}d(oe,"partialRightImpl");var ae=Symbol("partialRight.placeholder");re.placeholder=ae;function C(){return(C=Object.assign||function(t){for(var l=1;l<arguments.length;l++){var i=arguments[l];for(var f in i)Object.prototype.hasOwnProperty.call(i,f)&&(t[f]=i[f])}return t}).apply(this,arguments)}d(C,"u");function T(t,l){if(t==null)return{};var i,f,s={},v=Object.keys(t);for(f=0;f<v.length;f++)l.indexOf(i=v[f])>=0||(s[i]=t[i]);return s}d(T,"c");function z(t){var l=x.useRef(t),i=x.useRef(function(f){l.current&&l.current(f)});return l.current=t,i.current}d(z,"i");var R=d(function(t,l,i){return l===void 0&&(l=0),i===void 0&&(i=1),t>i?i:t<l?l:t},"s"),S=d(function(t){return"touches"in t},"f"),K=d(function(t){return t&&t.ownerDocument.defaultView||self},"v"),A=d(function(t,l,i){var f=t.getBoundingClientRect(),s=S(l)?(function(v,e){for(var r=0;r<v.length;r++)if(v[r].identifier===e)return v[r];return v[0]})(l.touches,i):l;return{left:R((s.pageX-(f.left+K(t).pageXOffset))/f.width),top:R((s.pageY-(f.top+K(t).pageYOffset))/f.height)}},"d"),W=d(function(t){!S(t)&&t.preventDefault()},"h"),X=b.memo(function(t){var l=t.onMove,i=t.onKey,f=T(t,["onMove","onKey"]),s=x.useRef(null),v=z(l),e=z(i),r=x.useRef(null),n=x.useRef(!1),o=x.useMemo(function(){var h=d(function(y){W(y),(S(y)?y.touches.length>0:y.buttons>0)&&s.current?v(A(s.current,y,r.current)):p(!1)},"e"),g=d(function(){return p(!1)},"r");function p(y){var m=n.current,_=K(s.current),w=y?_.addEventListener:_.removeEventListener;w(m?"touchmove":"mousemove",h),w(m?"touchend":"mouseup",g)}return d(p,"t"),[function(y){var m=y.nativeEvent,_=s.current;if(_&&(W(m),!(function(I,be){return be&&!S(I)})(m,n.current)&&_)){if(S(m)){n.current=!0;var w=m.changedTouches||[];w.length&&(r.current=w[0].identifier)}_.focus(),v(A(_,m,r.current)),p(!0)}},function(y){var m=y.which||y.keyCode;m<37||m>40||(y.preventDefault(),e({left:m===39?.05:m===37?-.05:0,top:m===40?.05:m===38?-.05:0}))},p]},[e,v]),a=o[0],c=o[1],u=o[2];return x.useEffect(function(){return u},[u]),b.createElement("div",C({},f,{onTouchStart:a,onMouseDown:a,className:"react-colorful__interactive",ref:s,onKeyDown:c,tabIndex:0,role:"slider"}))}),O=d(function(t){return t.filter(Boolean).join(" ")},"g"),D=d(function(t){var l=t.color,i=t.left,f=t.top,s=f===void 0?.5:f,v=O(["react-colorful__pointer",t.className]);return b.createElement("div",{className:v,style:{top:100*s+"%",left:100*i+"%"}},b.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:l}}))},"p"),k=d(function(t,l,i){return l===void 0&&(l=0),i===void 0&&(i=Math.pow(10,l)),Math.round(i*t)/i},"b"),Ce={grad:.9,turn:360,rad:360/(2*Math.PI)},$e=d(function(t){return ce(F(t))},"x"),F=d(function(t){return t[0]==="#"&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:t.length===4?k(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:t.length===8?k(parseInt(t.substring(6,8),16)/255,2):1}},"C"),Re=d(function(t,l){return l===void 0&&(l="deg"),Number(t)*(Ce[l]||1)},"E"),Se=d(function(t){var l=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(t);return l?Oe({h:Re(l[1],l[2]),s:Number(l[3]),l:Number(l[4]),a:l[5]===void 0?1:Number(l[5])/(l[6]?100:1)}):{h:0,s:0,v:0,a:1}},"H"),Oe=d(function(t){var l=t.s,i=t.l;return{h:t.h,s:(l*=(i<50?i:100-i)/100)>0?2*l/(i+l)*100:0,v:i+l,a:t.a}},"N"),Ie=d(function(t){return He(se(t))},"w"),le=d(function(t){var l=t.s,i=t.v,f=t.a,s=(200-l)*i/100;return{h:k(t.h),s:k(s>0&&s<200?l*i/100/(s<=100?s:200-s)*100:0),l:k(s/2),a:k(f,2)}},"y"),B=d(function(t){var l=le(t);return"hsl("+l.h+", "+l.s+"%, "+l.l+"%)"},"q"),j=d(function(t){var l=le(t);return"hsla("+l.h+", "+l.s+"%, "+l.l+"%, "+l.a+")"},"k"),se=d(function(t){var l=t.h,i=t.s,f=t.v,s=t.a;l=l/360*6,i/=100,f/=100;var v=Math.floor(l),e=f*(1-i),r=f*(1-(l-v)*i),n=f*(1-(1-l+v)*i),o=v%6;return{r:k(255*[f,r,e,e,n,f][o]),g:k(255*[n,f,f,r,e,e][o]),b:k(255*[e,e,n,f,f,r][o]),a:k(s,2)}},"I"),Ne=d(function(t){var l=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(t);return l?ce({r:Number(l[1])/(l[2]?100/255:1),g:Number(l[3])/(l[4]?100/255:1),b:Number(l[5])/(l[6]?100/255:1),a:l[7]===void 0?1:Number(l[7])/(l[8]?100:1)}):{h:0,s:0,v:0,a:1}},"z"),N=d(function(t){var l=t.toString(16);return l.length<2?"0"+l:l},"D"),He=d(function(t){var l=t.r,i=t.g,f=t.b,s=t.a,v=s<1?N(k(255*s)):"";return"#"+N(l)+N(i)+N(f)+v},"K"),ce=d(function(t){var l=t.r,i=t.g,f=t.b,s=t.a,v=Math.max(l,i,f),e=v-Math.min(l,i,f),r=e?v===l?(i-f)/e:v===i?2+(f-l)/e:4+(l-i)/e:0;return{h:k(60*(r<0?r+6:r)),s:k(v?e/v*100:0),v:k(v/255*100),a:s}},"L"),ie=b.memo(function(t){var l=t.hue,i=t.onChange,f=O(["react-colorful__hue",t.className]);return b.createElement("div",{className:f},b.createElement(X,{onMove:d(function(s){i({h:360*s.left})},"onMove"),onKey:d(function(s){i({h:R(l+360*s.left,0,360)})},"onKey"),"aria-label":"Hue","aria-valuenow":k(l),"aria-valuemax":"360","aria-valuemin":"0"},b.createElement(D,{className:"react-colorful__hue-pointer",left:l/360,color:B({h:l,s:100,v:100,a:1})})))}),ue=b.memo(function(t){var l=t.hsva,i=t.onChange,f={backgroundColor:B({h:l.h,s:100,v:100,a:1})};return b.createElement("div",{className:"react-colorful__saturation",style:f},b.createElement(X,{onMove:d(function(s){i({s:100*s.left,v:100-100*s.top})},"onMove"),onKey:d(function(s){i({s:R(l.s+100*s.left,0,100),v:R(l.v-100*s.top,0,100)})},"onKey"),"aria-label":"Color","aria-valuetext":"Saturation "+k(l.s)+"%, Brightness "+k(l.v)+"%"},b.createElement(D,{className:"react-colorful__saturation-pointer",top:1-l.v/100,left:l.s/100,color:B(l)})))}),fe=d(function(t,l){if(t===l)return!0;for(var i in t)if(t[i]!==l[i])return!1;return!0},"F"),he=d(function(t,l){return t.replace(/\s/g,"")===l.replace(/\s/g,"")},"P"),je=d(function(t,l){return t.toLowerCase()===l.toLowerCase()||fe(F(t),F(l))},"X");function G(t,l,i){var f=z(i),s=x.useState(function(){return t.toHsva(l)}),v=s[0],e=s[1],r=x.useRef({color:l,hsva:v});x.useEffect(function(){if(!t.equal(l,r.current.color)){var o=t.toHsva(l);r.current={hsva:o,color:l},e(o)}},[l,t]),x.useEffect(function(){var o;fe(v,r.current.hsva)||t.equal(o=t.fromHsva(v),r.current.color)||(r.current={hsva:v,color:o},f(o))},[v,t,f]);var n=x.useCallback(function(o){e(function(a){return Object.assign({},a,o)})},[]);return[v,n]}d(G,"Y");var ze=typeof window<"u"?x.useLayoutEffect:x.useEffect,Pe=d(function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},"$"),U=new Map,de=d(function(t){ze(function(){var l=t.current?t.current.ownerDocument:document;if(l!==void 0&&!U.has(l)){var i=l.createElement("style");i.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,U.set(l,i);var f=Pe();f&&i.setAttribute("nonce",f),l.head.appendChild(i)}},[])},"Q"),qe=d(function(t){var l=t.className,i=t.colorModel,f=t.color,s=f===void 0?i.defaultColor:f,v=t.onChange,e=T(t,["className","colorModel","color","onChange"]),r=x.useRef(null);de(r);var n=G(i,s,v),o=n[0],a=n[1],c=O(["react-colorful",l]);return b.createElement("div",C({},e,{ref:r,className:c}),b.createElement(ue,{hsva:o,onChange:a}),b.createElement(ie,{hue:o.h,onChange:a,className:"react-colorful__last-control"}))},"U"),Te={defaultColor:"000",toHsva:$e,fromHsva:d(function(t){return Ie({h:t.h,s:t.s,v:t.v,a:1})},"fromHsva"),equal:je},Le=d(function(t){return b.createElement(qe,C({},t,{colorModel:Te}))},"Z"),Ke=d(function(t){var l=t.className,i=t.hsva,f=t.onChange,s={backgroundImage:"linear-gradient(90deg, "+j(Object.assign({},i,{a:0}))+", "+j(Object.assign({},i,{a:1}))+")"},v=O(["react-colorful__alpha",l]),e=k(100*i.a);return b.createElement("div",{className:v},b.createElement("div",{className:"react-colorful__alpha-gradient",style:s}),b.createElement(X,{onMove:d(function(r){f({a:r.left})},"onMove"),onKey:d(function(r){f({a:R(i.a+r.left)})},"onKey"),"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},b.createElement(D,{className:"react-colorful__alpha-pointer",left:i.a,color:j(i)})))},"ee"),ve=d(function(t){var l=t.className,i=t.colorModel,f=t.color,s=f===void 0?i.defaultColor:f,v=t.onChange,e=T(t,["className","colorModel","color","onChange"]),r=x.useRef(null);de(r);var n=G(i,s,v),o=n[0],a=n[1],c=O(["react-colorful",l]);return b.createElement("div",C({},e,{ref:r,className:c}),b.createElement(ue,{hsva:o,onChange:a}),b.createElement(ie,{hue:o.h,onChange:a}),b.createElement(Ke,{hsva:o,onChange:a,className:"react-colorful__last-control"}))},"re"),Fe={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:Se,fromHsva:j,equal:he},Be=d(function(t){return b.createElement(ve,C({},t,{colorModel:Fe}))},"ue"),Ve={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Ne,fromHsva:d(function(t){var l=se(t);return"rgba("+l.r+", "+l.g+", "+l.b+", "+l.a+")"},"fromHsva"),equal:he},Xe=d(function(t){return b.createElement(ve,C({},t,{colorModel:Ve}))},"He"),De=E.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),Ge=E(J)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Ae=E.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),We=E(ye)(({theme:t})=>({fontFamily:t.typography.fonts.base})),Ue=E.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Ye=E.div(({theme:t,active:l})=>({width:16,height:16,boxShadow:l?`${t.appBorderColor} 0 0 0 1px inset, ${t.textMutedColor}50 0 0 0 4px`:`${t.appBorderColor} 0 0 0 1px inset`,borderRadius:t.appBorderRadius})),Je=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Y=d(({value:t,style:l,...i})=>{const f=`linear-gradient(${t}, ${t}), ${Je}, linear-gradient(#fff, #fff)`;return b.createElement(Ye,{...i,style:{...l,backgroundImage:f}})},"Swatch"),Qe=E(xe.Input)(({theme:t,readOnly:l})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:t.typography.fonts.base})),Ze=E(we)(({theme:t})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:t.input.color})),ge=(t=>(t.RGB="rgb",t.HSL="hsl",t.HEX="hex",t))(ge||{}),L=Object.values(ge),et=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,tt=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,nt=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,V=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,rt=/^\s*#?([0-9a-f]{3})\s*$/i,ot={hex:Le,rgb:Xe,hsl:Be},H={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},pe=d(t=>{const l=t?.match(et);if(!l)return[0,0,0,1];const[,i,f,s,v=1]=l;return[i,f,s,v].map(Number)},"stringToArgs"),at=d(t=>{const[l,i,f,s]=pe(t),[v,e,r]=M.default.rgb.hsl([l,i,f])||[0,0,0];return{valid:!0,value:t,keyword:M.default.rgb.keyword([l,i,f]),colorSpace:"rgb",rgb:t,hsl:`hsla(${v}, ${e}%, ${r}%, ${s})`,hex:`#${M.default.rgb.hex([l,i,f]).toLowerCase()}`}},"parseRgb"),lt=d(t=>{const[l,i,f,s]=pe(t),[v,e,r]=M.default.hsl.rgb([l,i,f])||[0,0,0];return{valid:!0,value:t,keyword:M.default.hsl.keyword([l,i,f]),colorSpace:"hsl",rgb:`rgba(${v}, ${e}, ${r}, ${s})`,hsl:t,hex:`#${M.default.hsl.hex([l,i,f]).toLowerCase()}`}},"parseHsl"),st=d(t=>{const l=t.replace("#",""),i=M.default.keyword.rgb(l)||M.default.hex.rgb(l),f=M.default.rgb.hsl(i);let s=t;/[^#a-f0-9]/i.test(t)?s=l:V.test(t)&&(s=`#${l}`);let v=!0;if(s.startsWith("#"))v=V.test(s);else try{M.default.keyword.hex(s)}catch{v=!1}return{valid:v,value:s,keyword:M.default.rgb.keyword(i),colorSpace:"hex",rgb:`rgba(${i[0]}, ${i[1]}, ${i[2]}, 1)`,hsl:`hsla(${f[0]}, ${f[1]}%, ${f[2]}%, 1)`,hex:s}},"parseHexOrKeyword"),$=d(t=>{if(t)return tt.test(t)?at(t):nt.test(t)?lt(t):st(t)},"parseValue"),ct=d((t,l,i)=>{if(!t||!l?.valid)return H[i];if(i!=="hex")return l?.[i]||H[i];if(!l.hex.startsWith("#"))try{return`#${M.default.keyword.hex(l.hex)}`}catch{return H.hex}const f=l.hex.match(rt);if(!f)return V.test(l.hex)?l.hex:H.hex;const[s,v,e]=f[1].split("");return`#${s}${s}${v}${v}${e}${e}`},"getRealValue"),it=d((t,l)=>{const[i,f]=x.useState(t||""),[s,v]=x.useState(()=>$(i)),[e,r]=x.useState(s?.colorSpace||"hex");x.useEffect(()=>{const c=t||"",u=$(c);f(c),v(u),r(u?.colorSpace||"hex")},[t]);const n=x.useMemo(()=>ct(i,s,e).toLowerCase(),[i,s,e]),o=x.useCallback(c=>{const u=$(c),h=u?.value||c||"";f(h),h===""&&(v(void 0),l(void 0)),u&&(v(u),r(u.colorSpace),l(u.value))},[l]),a=x.useCallback(()=>{const u=(L.indexOf(e)+1)%L.length,h=L[u];r(h);const g=s?.[h]||"";f(g),l(g)},[s,e,l]);return{value:i,realValue:n,updateValue:o,color:s,colorSpace:e,cycleColorSpace:a}},"useColorInput"),P=d(t=>t.replace(/\s*/,"").toLowerCase(),"id"),ut=d((t,l,i)=>{const[f,s]=x.useState(l?.valid?[l]:[]);x.useEffect(()=>{l===void 0&&s([])},[l]);const v=x.useMemo(()=>(t||[]).map(n=>typeof n=="string"?$(n):n.title?{...$(n.color),keyword:n.title}:$(n.color)).concat(f).filter(Boolean).slice(-27),[t,f]),e=x.useCallback(r=>{r?.valid&&(v.some(n=>n&&n[i]&&P(n[i]||"")===P(r[i]||""))||s(n=>n.concat(r)))},[i,v]);return{presets:v,addPreset:e}},"usePresets"),ft=d(({name:t,value:l,onChange:i,onFocus:f,onBlur:s,presetColors:v,startOpen:e=!1,argType:r})=>{const n=x.useCallback(Z(i,200),[i]),{value:o,realValue:a,updateValue:c,color:u,colorSpace:h,cycleColorSpace:g}=it(l,n),{presets:p,addPreset:y}=ut(v??[],u,h),m=ot[h],_=!!r?.table?.readonly;return b.createElement(De,{"aria-readonly":_},b.createElement(Ge,{startOpen:e,trigger:_?null:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>u&&y(u),tooltip:b.createElement(Ae,null,b.createElement(m,{color:a==="transparent"?"#000000":a,onChange:c,onFocus:f,onBlur:s}),p.length>0&&b.createElement(Ue,null,p.map((w,I)=>b.createElement(J,{key:`${w?.value||I}-${I}`,hasChrome:!1,tooltip:b.createElement(We,{note:w?.keyword||w?.value||""})},b.createElement(Y,{value:w?.[h]||"",active:!!(u&&w&&w[h]&&P(w[h]||"")===P(u[h])),onClick:()=>w&&c(w.value||"")})))))},b.createElement(Y,{value:a,style:{margin:4}})),b.createElement(Qe,{id:me(t),value:o,onChange:w=>c(w.target.value),onFocus:w=>w.target.select(),readOnly:_,placeholder:"Choose color..."}),o?b.createElement(Ze,{onClick:g}):null)},"ColorControl"),gt=ft;export{ft as ColorControl,gt as default};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import{x as a}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";const b=c=>{const r=[...c.palette?.entries()??[]];return r.length>0&&r[0][1].includes("-gradient")?a`
|
|
2
|
+
<div class="my-10 flex flex-wrap gap-4">
|
|
3
|
+
${r.map(([e,d])=>a`
|
|
4
|
+
<div class="w-[200px] overflow-clip rounded-lg bg-white shadow-md">
|
|
5
|
+
<div class="${d} h-[120px] w-full"></div>
|
|
6
|
+
<div class="p-3">
|
|
7
|
+
<h3 class="text-sm font-semibold capitalize text-black">${e}</h3>
|
|
8
|
+
<p class="text-xs text-gray-600">${e} gradient</p>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
`)}
|
|
12
|
+
</div>
|
|
13
|
+
`:a`
|
|
14
|
+
<div class="my-10 flex flex-wrap gap-2">
|
|
15
|
+
${r.map(([e,d])=>a`
|
|
16
|
+
<div class="flex flex-col overflow-clip rounded-lg shadow-md">
|
|
17
|
+
<div class="${d} size-16"></div>
|
|
18
|
+
<div class="grid h-7 place-items-center bg-white">
|
|
19
|
+
<div class="text-[10px] font-semibold text-gray-700">${e}</div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
`)}
|
|
23
|
+
</div>
|
|
24
|
+
`},m={title:"Design System/Colors",component:"btu-theme",tags:["autodocs"],parameters:{controls:{exclude:["palette"]},docs:{subtitle:"We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'."}},render:c=>b(c)},s={parameters:{docs:{description:{story:"Used for primary call to actions, visual UI elements, active and clicked states, and focused containers."}}},args:{palette:new Map([["25","bg-primary-25"],["50","bg-primary-50"],["100","bg-primary-100"],["200","bg-primary-200"],["300","bg-primary-300"],["400","bg-primary-400"],["500","bg-primary-500"],["600","bg-primary-600"],["700","bg-primary-700"],["800","bg-primary-800"],["900","bg-primary-900"]])}},t={parameters:{docs:{description:{story:"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green."}}},args:{palette:new Map([["25","bg-success-25"],["50","bg-success-50"],["100","bg-success-100"],["200","bg-success-200"],["300","bg-success-300"],["400","bg-success-400"],["500","bg-success-500"],["600","bg-success-600"],["700","bg-success-700"],["800","bg-success-800"],["900","bg-success-900"]])}},o={parameters:{docs:{description:{story:`Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.`}}},args:{palette:new Map([["25","bg-warning-25"],["50","bg-warning-50"],["100","bg-warning-100"],["200","bg-warning-200"],["300","bg-warning-300"],["400","bg-warning-400"],["500","bg-warning-500"],["600","bg-warning-600"],["700","bg-warning-700"],["800","bg-warning-800"],["900","bg-warning-900"]])}},n={parameters:{docs:{description:{story:'Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'}}},args:{palette:new Map([["25","bg-error-25"],["50","bg-error-50"],["100","bg-error-100"],["200","bg-error-200"],["300","bg-error-300"],["400","bg-error-400"],["500","bg-error-500"],["600","bg-error-600"],["700","bg-error-700"],["800","bg-error-800"],["900","bg-error-900"]])}},i={parameters:{docs:{description:{story:"Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray."}}},args:{palette:new Map([["25","bg-gray-25"],["50","bg-gray-50"],["100","bg-gray-100"],["200","bg-gray-200"],["300","bg-gray-300"],["400","bg-gray-400"],["500","bg-gray-500"],["600","bg-gray-600"],["700","bg-gray-700"],["800","bg-gray-800"],["900","bg-gray-900"]])}},g={args:{palette:new Map([["ai","bg-ai-gradient"],["error","bg-error-gradient"],["gray","bg-gray-gradient"],["primary","bg-primary-gradient"],["purple","bg-purple-gradient"],["rose","bg-rose-gradient"],["success","bg-success-gradient"],["teal","bg-teal-gradient"],["warning","bg-warning-gradient"]])}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
|
25
|
+
parameters: {
|
|
26
|
+
docs: {
|
|
27
|
+
description: {
|
|
28
|
+
story: 'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.'
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
args: {
|
|
33
|
+
palette: new Map([['25', 'bg-primary-25'], ['50', 'bg-primary-50'], ['100', 'bg-primary-100'], ['200', 'bg-primary-200'], ['300', 'bg-primary-300'], ['400', 'bg-primary-400'], ['500', 'bg-primary-500'], ['600', 'bg-primary-600'], ['700', 'bg-primary-700'], ['800', 'bg-primary-800'], ['900', 'bg-primary-900']])
|
|
34
|
+
}
|
|
35
|
+
}`,...s.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
|
36
|
+
parameters: {
|
|
37
|
+
docs: {
|
|
38
|
+
description: {
|
|
39
|
+
story: "Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green."
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
args: {
|
|
44
|
+
palette: new Map([['25', 'bg-success-25'], ['50', 'bg-success-50'], ['100', 'bg-success-100'], ['200', 'bg-success-200'], ['300', 'bg-success-300'], ['400', 'bg-success-400'], ['500', 'bg-success-500'], ['600', 'bg-success-600'], ['700', 'bg-success-700'], ['800', 'bg-success-800'], ['900', 'bg-success-900']])
|
|
45
|
+
}
|
|
46
|
+
}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
|
47
|
+
parameters: {
|
|
48
|
+
docs: {
|
|
49
|
+
description: {
|
|
50
|
+
story: 'Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users\\' attention.'
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
args: {
|
|
55
|
+
palette: new Map([['25', 'bg-warning-25'], ['50', 'bg-warning-50'], ['100', 'bg-warning-100'], ['200', 'bg-warning-200'], ['300', 'bg-warning-300'], ['400', 'bg-warning-400'], ['500', 'bg-warning-500'], ['600', 'bg-warning-600'], ['700', 'bg-warning-700'], ['800', 'bg-warning-800'], ['900', 'bg-warning-900']])
|
|
56
|
+
}
|
|
57
|
+
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
|
58
|
+
parameters: {
|
|
59
|
+
docs: {
|
|
60
|
+
description: {
|
|
61
|
+
story: 'Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
args: {
|
|
66
|
+
palette: new Map([['25', 'bg-error-25'], ['50', 'bg-error-50'], ['100', 'bg-error-100'], ['200', 'bg-error-200'], ['300', 'bg-error-300'], ['400', 'bg-error-400'], ['500', 'bg-error-500'], ['600', 'bg-error-600'], ['700', 'bg-error-700'], ['800', 'bg-error-800'], ['900', 'bg-error-900']])
|
|
67
|
+
}
|
|
68
|
+
}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
69
|
+
parameters: {
|
|
70
|
+
docs: {
|
|
71
|
+
description: {
|
|
72
|
+
story: 'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.'
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
args: {
|
|
77
|
+
palette: new Map([['25', 'bg-gray-25'], ['50', 'bg-gray-50'], ['100', 'bg-gray-100'], ['200', 'bg-gray-200'], ['300', 'bg-gray-300'], ['400', 'bg-gray-400'], ['500', 'bg-gray-500'], ['600', 'bg-gray-600'], ['700', 'bg-gray-700'], ['800', 'bg-gray-800'], ['900', 'bg-gray-900']])
|
|
78
|
+
}
|
|
79
|
+
}`,...i.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
|
|
80
|
+
args: {
|
|
81
|
+
palette: new Map([['ai', 'bg-ai-gradient'], ['error', 'bg-error-gradient'], ['gray', 'bg-gray-gradient'], ['primary', 'bg-primary-gradient'], ['purple', 'bg-purple-gradient'], ['rose', 'bg-rose-gradient'], ['success', 'bg-success-gradient'], ['teal', 'bg-teal-gradient'], ['warning', 'bg-warning-gradient']])
|
|
82
|
+
}
|
|
83
|
+
}`,...g.parameters?.docs?.source}}};const y=["Primary","Success","Warning","Error","Gray","Gradients"];export{n as Error,g as Gradients,i as Gray,s as Primary,t as Success,o as Warning,y as __namedExportsOrder,m as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{x as s}from"./iframe-
|
|
1
|
+
import{x as s}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";const a=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,n={title:"Components/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"btu-heading"},controls:{expanded:!0}},render:t=>a(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
args: {}
|
|
3
3
|
}`,...e.parameters?.docs?.source}}};const i=["Default"];export{e as Default,i as __namedExportsOrder,n as default};
|