npm - bromcom-ui-next - Versions diffs - 0.1.19 → 0.1.21 - Mend

bromcom-ui-next 0.1.19 → 0.1.21

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.

Files changed (280) hide show

package/dist/esm/bcm-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-checkbox.entry.js","mappings":"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","names":["tv"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\n\n/*\n @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n /\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /* Reference to the host element /\n @Element() el: HTMLElement;\n\n /\n Unique ID for the component. Automatically generated if not specified.\n /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /\n Label text to display next to the checkbox\n /\n @Prop()\n label?: string;\n\n /\n Name attribute for the checkbox when used in a form\n /\n @Prop()\n name: string;\n\n /\n Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n /\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /\n Size variant of the checkbox\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Determines if the checkbox is checked\n /\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /\n Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n /\n @Prop()\n error: boolean = false;\n\n /\n Determines if the checkbox is disabled\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Controls the position of the label relative to the checkbox\n /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /\n Internal state to track checked status\n /\n @State() internalChecked: boolean;\n\n /\n Event emitted when the checked state changes\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /* Reference to the underlying input element /\n private inputElement: HTMLInputElement;\n\n /\n Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n /\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /\n Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n /\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /\n Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n /\n @Watch('checked')\n syncCheckedProp(newValue: boolean \| undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /\n Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n /\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /\n Handles change events on the checkbox\n * Updates state and emits the change event\n /\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /\n Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n /\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /\n Tailwind Variants definition for the component\n * Configures styling based on component props\n /\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /\n Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' \|\| this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label \|\| 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/*\n @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n /\n@Component({\n tag: 'bcm-checkbox',\n styleUrl: 'checkbox.css',\n shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n /* Reference to the host element /\n @Element() el: HTMLElement;\n\n /\n Unique ID for the component. Automatically generated if not specified.\n /\n @Prop({ attribute: 'id', reflect: true })\n _id?: string = generateId('bcm-checkbox');\n\n /\n Label text to display next to the checkbox\n /\n @Prop()\n label?: string;\n\n /\n Name attribute for the checkbox when used in a form\n /\n @Prop()\n name: string;\n\n /\n Determines if the checkbox is in an indeterminate state.\n * This is useful when some items in a group of checkboxes are selected and others are not.\n /\n @Prop({ mutable: true })\n indeterminate: boolean = false;\n\n /\n Size variant of the checkbox\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Determines if the checkbox is checked\n /\n @Prop({ mutable: true })\n checked: boolean = false;\n\n /\n Indicates if the checkbox is in an error state.\n * This affects the visual styling of the component.\n /\n @Prop()\n error: boolean = false;\n\n /\n Determines if the checkbox is disabled\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Controls the position of the label relative to the checkbox\n /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /\n Internal state to track checked status\n /\n @State() internalChecked: boolean;\n\n /\n Event emitted when the checked state changes\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmCheckboxChange',\n })\n bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n /* Reference to the underlying input element /\n private inputElement: HTMLInputElement;\n\n /\n Lifecycle method that runs before the component first renders.\n * Initializes the internal checked state.\n /\n componentWillLoad() {\n this.internalChecked = this.checked !== undefined ? this.checked : false;\n }\n\n /\n Lifecycle method that runs after the component has rendered.\n * Updates the indeterminate state of the input element.\n /\n componentDidLoad() {\n this.updateIndeterminateState();\n }\n\n /\n Watches for changes to the checked prop and updates the internal state\n * @param newValue The new checked value\n /\n @Watch('checked')\n syncCheckedProp(newValue: boolean \| undefined) {\n if (newValue !== undefined) {\n this.internalChecked = newValue;\n }\n }\n\n /\n Watches for changes to indeterminate and internalChecked states\n * Updates the input element accordingly\n /\n @Watch('indeterminate')\n @Watch('internalChecked')\n updateIndeterminateState() {\n if (this.inputElement) {\n this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n }\n }\n\n /\n Handles change events on the checkbox\n * Updates state and emits the change event\n /\n private handleChange = () => {\n if (this.disabled) return;\n if (this.inputElement) {\n this.inputElement.indeterminate = false;\n this.indeterminate = false;\n this.internalChecked = !this.internalChecked;\n this.inputElement.checked = this.internalChecked;\n this.bcmCheckboxChange.emit({\n element: this.inputElement,\n checked: this.internalChecked,\n });\n }\n };\n\n /\n Returns the CSS custom properties based on component state\n * @returns Object with CSS custom properties\n /\n private getStyles() {\n const defaultStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n '--border-color': 'var(--bcm-ui-color-border-default)',\n '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n '--border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n '--hover-color': 'var(--bcm-ui-color-border-error)',\n };\n\n const disabledStyles = {\n '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n '--border-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n };\n\n return {\n ...defaultStyles,\n ...(this.error ? errorStyles : {}),\n ...(this.disabled ? disabledStyles : {}),\n };\n }\n\n /\n Tailwind Variants definition for the component\n * Configures styling based on component props\n /\n private classes = tv(\n {\n slots: {\n container: 'flex items-center bcm-ui-element bcm-checkbox',\n checkbox: [\n 'flex items-center justify-center rounded-sm',\n 'border border-solid border-[--border-color]',\n 'bg-[--unchecked-color]',\n 'transition-colors duration-200 ease-out',\n 'peer-checked:bg-[--checked-color]',\n 'peer-checked:border-[--checked-color]',\n 'peer-indeterminate:bg-[--checked-color]',\n 'peer-indeterminate:border-[--checked-color]',\n 'hover:border-[--hover-border-color]',\n 'hover:peer-checked:bg-[--hover-color]',\n 'hover:peer-indeterminate:bg-[--hover-color]',\n ],\n iconContainer: 'flex items-center justify-center',\n label: 'select-none text-color',\n hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n checkbox: 'size-3',\n iconContainer: 'size-2 text-size-2',\n label: 'text-size-4',\n hiddenInput: 'size-3',\n },\n medium: {\n container: 'gap-2.5',\n checkbox: 'size-4',\n iconContainer: 'size-[10px] text-size-3',\n label: 'text-size-5',\n hiddenInput: 'size-4',\n },\n large: {\n container: 'gap-3',\n checkbox: 'size-[18px]',\n iconContainer: 'size-4 text-size-4',\n label: 'text-size-6',\n hiddenInput: 'size-[18px]',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n label: 'cursor-not-allowed text-color-disabled',\n iconContainer: 'text-color-disabled',\n hiddenInput: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer',\n checkbox: 'cursor-pointer',\n label: 'cursor-pointer text-color',\n iconContainer: 'text-color-base',\n hiddenInput: 'cursor-pointer',\n },\n },\n labelPosition: {\n left: {\n container: 'flex-row-reverse',\n },\n right: {\n container: 'flex-row',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n checked: false,\n disabled: false,\n error: false,\n labelPosition: 'right',\n },\n },\n { twMerge: false },\n );\n\n /\n Renders the checkbox component\n */\n render() {\n const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n const internalId = this._id + '-internal-checkbox' \|\| this.name;\n\n return (\n <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n <div class=\"relative inline-flex\">\n <input\n type=\"checkbox\"\n role=\"checkbox\"\n id={internalId}\n name={this.name}\n checked={this.internalChecked}\n indeterminate={this.indeterminate}\n disabled={this.disabled}\n class={hiddenInput()}\n aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n aria-invalid={this.error}\n aria-label={this.label \|\| 'Checkbox'}\n onChange={this.handleChange}\n ref={el => (this.inputElement = el as HTMLInputElement)}\n />\n <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n {this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n </div>\n )}\n {this.indeterminate && !this.internalChecked && (\n <div class={iconContainer()} part=\"icon\">\n <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n </div>\n )}\n </div>\n </div>\n <label htmlFor={internalId} class={label()} part=\"label\">\n {this.label}\n </label>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-chip.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 const STATUS_COLORS = {
     info: 'blue',
@@ -25,7 +25,7 @@ const BcmChip = class {
         this.dismissible = false;
         /** Whether chip is disabled */
         this.disabled = false;
-        this.chipClass = ce({
+        this.chipClass = tv({
             base: [
                 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',
                 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',
@@ -116,7 +116,7 @@ const BcmChip = class {
         }
     }
     render() {
-        return (h("div", { key: '1a0a8f0eb3dfd2b7c903b04d53cca36cbd7359d2', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '32a9facad2711417d02f1d9183e9455aa0a9ee2e' }), this.dismissible && h("bcm-icon", { key: 'f9ea8551142341444d1d5ba90bf9c378bf852e8c', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
+        return (h("div", { key: '0c57684b2042bcbc6b5950c8a51412eea46bf9e7', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '5eef26442dbe670cfa317998b349fa1794c845f8' }), this.dismissible && h("bcm-icon", { key: '5ca7c5b1dfb83db893772208ea792d9272cea649', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
     }
 };
 BcmChip.style = BcmChipStyle0;

package/dist/esm/bcm-chip.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-chip.entry.js","mappings":"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","names":["tv"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' \| 'medium' \| 'large';\nexport type ChipKind = 'filled' \| 'outlined' \| 'text';\nexport type ChipStatus = 'info' \| 'error' \| 'warning' \| 'success' \| 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n \n @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n \n @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n \n @prop {ChipSize} size - Defines the size of the chip: 'small' \| 'medium' \| 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' \| 'outlined' \| 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' \| 'error' \| 'warning' \| 'success' \| 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n \n @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n \n @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n /\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /* Chip size variant /\n @Prop()\n size?: ChipSize = 'medium';\n\n /* Chip style variant /\n @Prop()\n kind?: ChipKind = 'filled';\n\n /* Chip status /\n @Prop()\n status?: ChipStatus = 'default';\n\n /* Whether chip can be dismissed /\n @Prop()\n dismissible?: boolean = false;\n\n /* Whether chip is disabled /\n @Prop()\n disabled?: boolean = false;\n\n /* Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n ><slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-chip.entry.js","mappings":"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","names":[],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' \| 'medium' \| 'large';\nexport type ChipKind = 'filled' \| 'outlined' \| 'text';\nexport type ChipStatus = 'info' \| 'error' \| 'warning' \| 'success' \| 'default';\n\nexport const STATUS_COLORS = {\n info: 'blue',\n error: 'red',\n warning: 'amber',\n success: 'green',\n} as const;\n",":host {\n display: inline-block;\n --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n --bcm-chip-text: var(--bcm-ui-color-text-default);\n --bcm-chip-border: var(--bcm-ui-color-border-default);\n --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n \n @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n * Success Chip\n * </bcm-chip>\n \n @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n * Dismissible Chip\n * </bcm-chip>\n \n @prop {ChipSize} size - Defines the size of the chip: 'small' \| 'medium' \| 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' \| 'outlined' \| 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' \| 'error' \| 'warning' \| 'success' \| 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n \n @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n \n @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n /\n\n@Component({\n tag: 'bcm-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n /* Chip size variant /\n @Prop()\n size?: ChipSize = 'medium';\n\n /* Chip style variant /\n @Prop()\n kind?: ChipKind = 'filled';\n\n /* Chip status /\n @Prop()\n status?: ChipStatus = 'default';\n\n /* Whether chip can be dismissed /\n @Prop()\n dismissible?: boolean = false;\n\n /* Whether chip is disabled /\n @Prop()\n disabled?: boolean = false;\n\n /* Chip color variant */\n @Prop()\n color?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmDismiss: EventEmitter<void>;\n\n private chipClass = tv(\n {\n base: [\n 'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n ],\n variants: {\n size: {\n small: 'small py-px text-size-3',\n medium: 'medium py-0.5 text-size-4',\n large: 'large py-1 text-size-5',\n },\n kind: {\n filled: 'filled border-transparent',\n outlined: 'outlined',\n text: 'text border-none',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n },\n },\n { twMerge: false },\n );\n\n private get chipStyle() {\n let _color = this.color;\n\n if (this.disabled) {\n return {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n }\n\n if (this.status !== 'default') {\n _color = STATUS_COLORS[this.status];\n }\n\n const styles = {\n filled: {\n '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n },\n };\n\n const defaultStyles = {\n filled: {\n '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n outlined: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n text: {\n '--bcm-chip-bg': 'transparent',\n '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n '--bcm-chip-border': 'transparent',\n '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n },\n };\n\n return _color ? styles[this.kind] : defaultStyles[this.kind];\n }\n\n private handleDismiss() {\n if (!this.disabled) {\n this.bcmDismiss.emit();\n }\n }\n\n render() {\n return (\n <div\n style={this.chipStyle}\n class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n role=\"button\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-divider.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 const dividerCss = ".block{display:block}:host{--bcm-divider-border:var(--bcm-ui-color-border-default);display:block}.static{position:static}.h-full{height:100%}.w-full{width:100%}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\\[1px\\]{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-\\[--bcm-divider-border\\]{border-color:var(--bcm-divider-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const BcmDividerStyle0 = dividerCss;
@@ -35,7 +35,7 @@ const Divider = class {
          * <bcm-divider size="large" />
          */
         this.size = 'medium';
-        this.dividerClass = ce({
+        this.dividerClass = tv({
             base: 'border-[--bcm-divider-border]',
             variants: {
                 direction: {
@@ -63,7 +63,7 @@ const Divider = class {
         });
     }
     render() {
-        return (h("div", { key: 'adb2a14389e580501a9298e397daffc73fa0d6e6', role: "separator", "aria-orientation": this.direction, class: this.dividerClass({
+        return (h("div", { key: '4ddf1a7851fb65cbbd17abbd1db19431afebe392', role: "separator", "aria-orientation": this.direction, class: this.dividerClass({
                 direction: this.direction,
                 variant: this.variant,
                 size: this.size,

package/dist/esm/bcm-divider.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-divider.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,itBAAitB,CAAC;AACruB,yBAAe,UAAU;;MCcZ,OAAO;IALpB;;;;;;;;;~~QAcI~~,cAAS,GAA8B,YAAY,CAAC;;;;;;;;QAUpD,YAAO,GAAkC,OAAO,CAAC;;;;;;;;;;;;QAcjD,SAAI,GAAiC,QAAQ,CAAC;QAEtC,iBAAY,~~GAAGA~~,EAAE,~~CACrB~~;~~YACI~~,IAAI,EAAE,+BAA+B;YACrC,QAAQ,EAAE;~~gBACN~~,SAAS,EAAE;~~oBACP~~,UAAU,EAAE,iBAAiB;oBAC7B,QAAQ,EAAE,iBAAiB;~~iBAC9B~~;gBACD,OAAO,EAAE;~~oBACL~~,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,eAAe;oBACvB,MAAM,EAAE,eAAe;~~iBAC1B~~;gBACD,IAAI,EAAE;~~oBACF~~,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,UAAU;oBAClB,KAAK,EAAE,UAAU;~~iBACpB~~;~~aACJ~~;YACD,eAAe,EAAE;~~gBACb~~,SAAS,EAAE,YAAY;gBACvB,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,QAAQ;~~aACjB~~;~~SACJ~~,EACD;~~YACI~~,OAAO,EAAE,KAAK;~~SACjB~~,~~CACJ~~,CAAC;~~KAeL~~;~~IAbG~~,MAAM;~~QACF~~,~~QACI~~,~~4DACI~~,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;~~gBACrB~~,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;~~aAClB~~,CAAC,~~GACC~~,~~EACT~~;~~KACL~~;;;;;;","names":[~~"tv"~~],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '~~tailwind-variants~~';\n\n/*\n @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n /\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /\n @prop {('horizontal'\|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n @prop {('solid'\|'dashed'\|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n /\n @Prop()\n variant: 'solid' \| 'dashed' \| 'dotted' = 'solid';\n\n /\n @prop {('small'\|'medium'\|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-divider.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,itBAAitB,CAAC;AACruB,yBAAe,UAAU;;MCcZ,OAAO;IALpB;;;;;;;;;QAcE,cAAS,GAA8B,YAAY,CAAC;;;;;;;;QAUpD,YAAO,GAAkC,OAAO,CAAC;;;;;;;;;;;;QAcjD,SAAI,GAAiC,QAAQ,CAAC;QAEtC,iBAAY,GAAG,EAAE,CACvB;YACE,IAAI,EAAE,+BAA+B;YACrC,QAAQ,EAAE;gBACR,SAAS,EAAE;oBACT,UAAU,EAAE,iBAAiB;oBAC7B,QAAQ,EAAE,iBAAiB;iBAC5B;gBACD,OAAO,EAAE;oBACP,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,eAAe;oBACvB,MAAM,EAAE,eAAe;iBACxB;gBACD,IAAI,EAAE;oBACJ,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,UAAU;oBAClB,KAAK,EAAE,UAAU;iBAClB;aACF;YACD,eAAe,EAAE;gBACf,SAAS,EAAE,YAAY;gBACvB,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,QAAQ;aACf;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAeH;IAbC,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,GACG,EACP;KACH;;;;;;","names":[],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n /\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /\n @prop {('horizontal'\|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n @prop {('solid'\|'dashed'\|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n /\n @Prop()\n variant: 'solid' \| 'dashed' \| 'dotted' = 'solid';\n\n /\n @prop {('small'\|'medium'\|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-pop-confirm.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-18b75a47.js';
 import { c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-b7749b71.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 const popConfirmCss = ".absolute{position:absolute}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.outline{outline-style:solid}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
 const BcmPopConfirmStyle0 = popConfirmCss;
@@ -140,7 +140,7 @@ const PopConfirm = class {
          * Defines Tailwind Variants classes for the pop-up's structure and styling.
          * Supports different sizes and generates dynamic class names.
          */
-        this.classes = ce({
+        this.classes = tv({
             slots: {
                 container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',
                 header: 'flex justify-between items-center',
@@ -237,7 +237,7 @@ const PopConfirm = class {
         const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({
             size: this.size,
         });
-        return (h(Fragment, { key: '8910f368da993572cb4725dcbb74235ec50348e8' }, this.isOpen && (h("div", { key: '4ded121b7e121f8bb0dd1fe76b2921fd2a487fe8', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '94a78199e0e90cec5ba905db17d3a9c48a28a9a7', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'd21596aa10c8128c2d9921b3bc6c4b93002877d4', class: header() }, h("div", { key: 'e0a91a6031f59630cfeea3ef5e35a32e973c6006', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '9f184b3caf099697d4139a6a9efd276618b0f818', "icon-name": statusIcons[this.status] }), h("span", { key: '50fd578631061127dd49d00600a4d83d645f4f76', class: titleContainer() }, this.headerText), h("slot", { key: '8c29cbde0194fa1ff1ca82286b57b34532162d8b', name: "header" })), h("div", { key: '6ef68d637bbfd3cf2fd2c1a8650c222d5970cf64', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: 'c017286c2604e18e8ad47c889092fa727a01a18f', "icon-name": "far fa-times" }))), h("main", { key: '5f9255fd563714b7eb842900010e8d1c51417172', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: 'a7ca7e568776da834bc7fe44993c32f219522a1a', name: "body" }, this.description)), h("footer", { key: '1172e51992183b617d6d5ce53a4a09a09be12ae8', class: footer() }, h("bcm-button", { key: 'e99da377988d0be710e5ce6d47c84cc65298aa1f', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '8154b716f4bf1b5ed272a3b53be7ddaf151ae0cf', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'ad182d00fc2925d7b403f70250cd1e9687432a46', name: "footer" }))))));
+        return (h(Fragment, { key: '256bba18a7185df003cf435e9c50bb3faf655bd3' }, this.isOpen && (h("div", { key: '8557109b4b7bcd9242cad12e20ffbe2b9abc7cb1', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '5233f27cec248cf1e6f0ee50d0cd7b9302b68de7', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: '78fc2b3ccada895c52fef483ab8263eedb29cef4', class: header() }, h("div", { key: '104d8cc9c1e2256f8be5ea127e22a3114f1c0608', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '348e431869d73de73d243fe9432fca9f7d5bbe8a', "icon-name": statusIcons[this.status] }), h("span", { key: '6b197fb03736b8b838e845f3cd9c13db64d2cb30', class: titleContainer() }, this.headerText), h("slot", { key: 'b7a08113f60b290b78223b95de1c897d839b9f2c', name: "header" })), h("div", { key: 'c10afd851fcdffbf090f11b53ebccffeb582a1a3', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: '77ec3e916624528f21314dab55f6fdc9cfed6b54', "icon-name": "far fa-times" }))), h("main", { key: '714b0c73e0d71f45341fc9e9d2822cf6f6820c1d', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '43a7c9fe77aec8273bdb9dbd45bdd34f66731d71', name: "body" }, this.description)), h("footer", { key: '91020f742b01472c171451bda4d2ce97a30b5b1c', class: footer() }, h("bcm-button", { key: 'f5395add9ad6aa471e0a7285f810892e6d1b04ad', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '0b8c99beb293cf560cf3c47446447194c288773a', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'f89db0835be4030896da14ab344f77c660061332', name: "footer" }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bcm-pop-confirm.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-pop-confirm.entry.js","mappings":"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","names":["tv"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from 'tailwind-variants';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/*\n @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n \n @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n \n @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n \n @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n \n // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n \n @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' \| 'medium' \| 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' \| 'error' \| 'warning' \| 'success' \| 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n \n @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n \n @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n \n @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n \n @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n \n @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n /\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /\n The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n /\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /\n The text displayed on the cancel button.\n * @default 'Cancel'\n /\n @Prop()\n cancelText: string = 'Cancel';\n\n /\n The text displayed on the confirm button.\n * @default 'Yes'\n /\n @Prop()\n confirmText: string = 'Yes';\n\n /\n The description or body content of the pop-up.\n * @default ''\n /\n @Prop()\n description: string = '';\n\n /\n The header text displayed at the top of the pop-up.\n * @default ''\n /\n @Prop()\n headerText: string = '';\n\n /\n The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n /\n @Prop()\n placement: Placement = 'bottom';\n\n /\n The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n /\n @Prop()\n status: 'info' \| 'error' \| 'warning' \| 'success' = 'info';\n\n /\n Whether to display a status icon based on the `status` prop.\n * @default true\n /\n @Prop()\n statusIcon: boolean = true;\n\n /\n The ID of the trigger element (e.g., a button) that opens the pop-up.\n /\n @Prop()\n targetId: string;\n\n // State variables\n /\n Indicates whether the pop-up is currently open or closed.\n * @default false\n /\n @State()\n isOpen: boolean = false;\n\n /\n The current placement position of the pop-up after computation.\n /\n @State()\n currentPlacement: 'top' \| 'bottom' \| 'left' \| 'right';\n\n // Event Emitters\n /\n Emits an event when the user confirms the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /\n Emits an event when the user cancels the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /\n Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n /\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n\n /\n Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n /\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /\n Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /\n Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /\n Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n /\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /\n Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n /\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /\n Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n /\n private updatePosition = async () => {\n if (!this.triggerElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /\n Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n /\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /\n Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n /\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /\n Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n /\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /\n Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n /\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/ Arrow /}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/ Header Content /}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/ Main Content /}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/ Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-pop-confirm.entry.js","mappings":"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","names":[],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from '@utils/tv';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/*\n @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n \n @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n \n @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n \n @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n \n // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n \n @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' \| 'medium' \| 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' \| 'error' \| 'warning' \| 'success' \| 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n \n @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n \n @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n \n @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n \n @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n \n @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n /\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /\n The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n /\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /\n The text displayed on the cancel button.\n * @default 'Cancel'\n /\n @Prop()\n cancelText: string = 'Cancel';\n\n /\n The text displayed on the confirm button.\n * @default 'Yes'\n /\n @Prop()\n confirmText: string = 'Yes';\n\n /\n The description or body content of the pop-up.\n * @default ''\n /\n @Prop()\n description: string = '';\n\n /\n The header text displayed at the top of the pop-up.\n * @default ''\n /\n @Prop()\n headerText: string = '';\n\n /\n The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n /\n @Prop()\n placement: Placement = 'bottom';\n\n /\n The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n /\n @Prop()\n status: 'info' \| 'error' \| 'warning' \| 'success' = 'info';\n\n /\n Whether to display a status icon based on the `status` prop.\n * @default true\n /\n @Prop()\n statusIcon: boolean = true;\n\n /\n The ID of the trigger element (e.g., a button) that opens the pop-up.\n /\n @Prop()\n targetId: string;\n\n // State variables\n /\n Indicates whether the pop-up is currently open or closed.\n * @default false\n /\n @State()\n isOpen: boolean = false;\n\n /\n The current placement position of the pop-up after computation.\n /\n @State()\n currentPlacement: 'top' \| 'bottom' \| 'left' \| 'right';\n\n // Event Emitters\n /\n Emits an event when the user confirms the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /\n Emits an event when the user cancels the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /\n Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n /\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n /\n Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n /\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /\n Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /\n Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /\n Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n /\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /\n Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n /\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /\n Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n /\n private updatePosition = async () => {\n if (!this.triggerElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /\n Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n /\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /\n Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n /\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /\n Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n /\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /\n Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n /\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/ Arrow /}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/ Header Content /}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/ Main Content /}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/ Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-popover.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-18b75a47.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-b7749b71.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
 const BcmPopoverStyle0 = popoverCss;
@@ -116,7 +116,7 @@ const Popover = class {
                 [staticSide]: '-4px',
             });
         };
-        this.popoverClass = ce({
+        this.popoverClass = tv({
             slots: {
                 box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',
                 header: 'font-semibold text-color',
@@ -176,7 +176,7 @@ const Popover = class {
             isOpen: this.open,
             size: this.size,
         });
-        return (h("div", { key: '3fe47e7ebc4fb9f9fad0fda8dedf11f2ea8e904f', class: "relative" }, h("slot", { key: '8dd0e99a839b2c9c0ad6df67356bf616dae407f1', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'b4339c24996ec4666ffb731f7908513ade8cb5d8', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f94ca6625dac67dd16f625398c007a274e677ac7', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'd64bf52940bef06b04ec2c13f3116652a7b6b8d6', class: header(), part: "header" }, h("slot", { key: 'be1ee83453f9b159297e6e7e73d5451f21fbb873', name: "header" }, this.headerText)), h("div", { key: '9838c02e51fac40992a34fdfcaecb8d48fba48c8', class: content(), part: "content" }, h("slot", { key: '0f01f42280a5058d4a4aacca035111e8990c194a', name: "content" }, this.message)))));
+        return (h("div", { key: 'e57bc4bf987d3e0ab1c32093c0c2aa4fb19ec403', class: "relative" }, h("slot", { key: '4e2cf108937324457a86501891f280abc1ab1bbb', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '63ef22a0aaed9d37a570686c191a2d1b901a38df', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f6c3d7d6733e60928703b3be49b69abc69693a2e', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: '88898bfe6a978e5a7f85c9bd72387a1965bd5e8b', class: header(), part: "header" }, h("slot", { key: '13d490f43ac484bfe7c7ece3d93cc5161d85ef6f', name: "header" }, this.headerText)), h("div", { key: 'a1de41f15a483d4eefdbc915109f971225163852', class: content(), part: "content" }, h("slot", { key: '8000dff7ff5ed0466fcb50dae1b23c0510a7bfc8', name: "content" }, this.message)))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bcm-popover.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-popover.entry.js","mappings":"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","names":["tv"],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n * <bcm-button>Click Me</bcm-button>\n * <span slot=\"header\">Header</span>\n * <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n \n @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n \n @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n * <bcm-button>Toggle Me</bcm-button>\n * <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n * const popover = document.querySelector('#my-popover');\n * popover.openPopup(); // Opens the popover\n * popover.closePopup(); // Closes the popover\n * </script>\n \n @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n \n @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-popover',\n styleUrl: 'popover.css',\n shadow: true,\n})\nexport class Popover implements ComponentInterface {\n @Element() el: HTMLElement;\n private targetElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the popover.\n * Controls the text size and padding of the popover content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the popover relative to the target element.\n * Determines where the popover appears around the trigger element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the popover.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'click'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'click';\n /\n @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n * Adds a delay to prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n hoverDelay: number = 150;\n /\n @prop {boolean} open - Indicates whether the popover is currently open.\n * Can be set programmatically or toggled by user interaction. Mutable.\n * Default: false\n /\n @Prop({ mutable: true })\n open: boolean = false;\n /\n @prop {string} headerText - Custom text for the popover header.\n * Used as fallback content if the 'header' slot is not provided.\n /\n @Prop()\n headerText: string;\n /\n @prop {string} message - Custom text for the popover content.\n * Used as fallback content if the 'content' slot is not provided.\n /\n @Prop()\n message: string;\n /\n @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n * Useful for tracking when the popover becomes visible.\n /\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverOpen: EventEmitter<void>;\n\n /\n @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n * Useful for tracking when the popover is hidden.\n /\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverClose: EventEmitter<void>;\n\n connectedCallback() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private togglePopover = () => {\n this.open = !this.open;\n if (this.open) {\n this.bcmPopoverOpen.emit();\n } else {\n this.bcmPopoverClose.emit();\n }\n this.updatePosition();\n };\n\n private showPopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.bcmPopoverOpen.emit();\n this.updatePosition();\n }, this.hoverDelay);\n };\n\n private hidePopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.bcmPopoverClose.emit();\n }, this.hoverDelay);\n };\n\n /\n @method {Promise<void>} openPopup - Programmatically opens the popover.\n * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is opened.\n /\n @Method()\n async openPopup() {\n this.showPopover();\n }\n\n /\n @method {Promise<void>} closePopup - Programmatically closes the popover.\n * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is closed.\n */\n @Method()\n async closePopup() {\n this.hidePopover();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.togglePopover);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showPopover);\n this.targetElement.addEventListener('mouseleave', this.hidePopover);\n }\n\n if (this.popoverElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private popoverClass = tv({\n slots: {\n box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n header: 'font-semibold text-color',\n content: 'font-normal text-color',\n arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n },\n variants: {\n size: {\n small: { box: 'text-size-3' },\n medium: { box: 'text-size-4' },\n large: { box: 'text-size-5' },\n },\n isOpen: {\n true: { box: 'flex' },\n false: { box: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n });\n\n render() {\n const { box, header, content, arrow } = this.popoverClass({\n isOpen: this.open,\n size: this.size,\n });\n\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n <div class={header()} part=\"header\">\n <slot name=\"header\">{this.headerText}</slot>\n </div>\n <div class={content()} part=\"content\">\n <slot name=\"content\">{this.message}</slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-popover.entry.js","mappings":"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","names":[],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n * <bcm-button>Click Me</bcm-button>\n * <span slot=\"header\">Header</span>\n * <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n \n @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n \n @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n * <bcm-button>Toggle Me</bcm-button>\n * <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n * const popover = document.querySelector('#my-popover');\n * popover.openPopup(); // Opens the popover\n * popover.closePopup(); // Closes the popover\n * </script>\n \n @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n \n @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-popover',\n styleUrl: 'popover.css',\n shadow: true,\n})\nexport class Popover implements ComponentInterface {\n @Element() el: HTMLElement;\n private targetElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the popover.\n * Controls the text size and padding of the popover content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the popover relative to the target element.\n * Determines where the popover appears around the trigger element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the popover.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'click'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'click';\n /\n @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n * Adds a delay to prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n hoverDelay: number = 150;\n /\n @prop {boolean} open - Indicates whether the popover is currently open.\n * Can be set programmatically or toggled by user interaction. Mutable.\n * Default: false\n /\n @Prop({ mutable: true })\n open: boolean = false;\n /\n @prop {string} headerText - Custom text for the popover header.\n * Used as fallback content if the 'header' slot is not provided.\n /\n @Prop()\n headerText: string;\n /\n @prop {string} message - Custom text for the popover content.\n * Used as fallback content if the 'content' slot is not provided.\n /\n @Prop()\n message: string;\n /\n @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n * Useful for tracking when the popover becomes visible.\n /\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverOpen: EventEmitter<void>;\n\n /\n @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n * Useful for tracking when the popover is hidden.\n /\n @Event({ composed: false, bubbles: false, cancelable: true })\n bcmPopoverClose: EventEmitter<void>;\n\n connectedCallback() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private togglePopover = () => {\n this.open = !this.open;\n if (this.open) {\n this.bcmPopoverOpen.emit();\n } else {\n this.bcmPopoverClose.emit();\n }\n this.updatePosition();\n };\n\n private showPopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.bcmPopoverOpen.emit();\n this.updatePosition();\n }, this.hoverDelay);\n };\n\n private hidePopover = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.bcmPopoverClose.emit();\n }, this.hoverDelay);\n };\n\n /\n @method {Promise<void>} openPopup - Programmatically opens the popover.\n * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is opened.\n /\n @Method()\n async openPopup() {\n this.showPopover();\n }\n\n /\n @method {Promise<void>} closePopup - Programmatically closes the popover.\n * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n * @returns {Promise<void>} A promise that resolves when the popover is closed.\n */\n @Method()\n async closePopup() {\n this.hidePopover();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.togglePopover);\n this.targetElement.removeEventListener('mouseenter', this.showPopover);\n this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.togglePopover);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showPopover);\n this.targetElement.addEventListener('mouseleave', this.hidePopover);\n }\n\n if (this.popoverElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: '-4px',\n });\n };\n\n private popoverClass = tv({\n slots: {\n box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n header: 'font-semibold text-color',\n content: 'font-normal text-color',\n arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n },\n variants: {\n size: {\n small: { box: 'text-size-3' },\n medium: { box: 'text-size-4' },\n large: { box: 'text-size-5' },\n },\n isOpen: {\n true: { box: 'flex' },\n false: { box: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n });\n\n render() {\n const { box, header, content, arrow } = this.popoverClass({\n isOpen: this.open,\n size: this.size,\n });\n\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n <div class={header()} part=\"header\">\n <slot name=\"header\">{this.headerText}</slot>\n </div>\n <div class={content()} part=\"content\">\n <slot name=\"content\">{this.message}</slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-radio-group.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 import { g as generateId } from './generate-id-3b2fcb93.js';
 import { c as classNames } from './index-097075ad.js';
@@ -50,7 +50,7 @@ const BcmRadioGroup = class {
                 radio.error = this.error;
             });
         };
-        this.radioGroupClass = ce({
+        this.radioGroupClass = tv({
             slots: {
                 host: ['bcm-ui-element bcm-radio-group flex flex-col'],
                 container: ['flex'],
@@ -99,7 +99,7 @@ const BcmRadioGroup = class {
      */
     async setClear() {
         var _a;
-        this.value = "";
+        this.value = '';
         (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
             radio.checked = false;
         });
@@ -138,14 +138,14 @@ const BcmRadioGroup = class {
             size: this.size,
             direction: this.direction,
         });
-        return (h("div", { key: '482530d13c741ccd1d4a6a2255f984a3957cb3f1', class: host() }, this.label && (h("label", { key: '15b52d29e3ee83bfc6ccd483d4296195f2eb562b', class: classNames('input-label font-medium', {
+        return (h("div", { key: '8a8ca20a35d1b1dc50a9cbd44b37c21cc9591617', class: host() }, this.label && (h("label", { key: '82df9232afd7a395acaa50096f48b74349f82c0d', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }) }, h("slot", { key: 'f241a0ec8a9f8b5175e54c27238a81abe6e5c043', name: "label" }, this.label), this.required && h("span", { key: 'c091f0d477cb5b8a5ba88ad2aff77f212c780058' }, "*"))), h("div", { key: 'f91e7e3bfd60aa6907ff3b2869d21a6962664062', class: container() }, h("slot", { key: 'ec597411044a4b6a537f7e5bf7391499dacd86e7', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '6b35ceb2bbdd2c6bbf1c6d3643902ae022dba111', class: classNames('input-caption-text font-regular mt-1', {
+            }) }, h("slot", { key: 'e328ff4bb753334d9a15ddd6879566149c490d89', name: "label" }, this.label), this.required && h("span", { key: '4671022c9d17783262dd0d80034a1f0f67517b24' }, "*"))), h("div", { key: '87df33142912050dc54c54d8cedf0497936aa7b8', class: container() }, h("slot", { key: '204d69a31753136cd8000904d604d21d748b60bb', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '4a7a5457542d2bba9c72e15d3ac0c9efc68bd4e9', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled,
                 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
                 'text-[--bcm-ui-color-text-disabled]': this.disabled,