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

bromcom-ui-next 0.1.20 → 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 (290) hide show

package/dist/collection/components/popover/popover.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.component.js","sourceRoot":"","sources":["../../../src/components/popover/popover.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"popover.component.js","sourceRoot":"","sources":["../../../src/components/popover/popover.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/radio/radio.component.js CHANGED Viewed

@@ -39,7 +39,7 @@
  * @csspart label - The label text element.
  */
 import { h } from "@stencil/core";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 export class BcmRadio {
     constructor() {
         /**
@@ -190,7 +190,7 @@ export class BcmRadio {
             readonly: this.readonly,
             labelPosition: this.labelPosition,
         });
-        return (h("label", { key: '4b53e856e66a8f35fddca847ea0dad4f749d9ad1', class: container(), style: this.getRadioStyle() }, h("input", { key: '04506f00b7b0773c43f6d3cf65967d83f11dc1ed', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '9da73fa48763a71a9eafc6ed9bca5812317b8268', class: dotContainer() }, h("div", { key: '2126018bf6f5eef062be02cec1f081daf939c9df', class: dot() })), h("span", { key: '86f5e2485c72b27892054ffa0082307f025ad31a', class: labelClass() }, h("slot", { key: 'de05d13a1e3d88b7a6f7f7e9355d7b36d740709f' }, this.label))));
+        return (h("label", { key: '8ec133d96a6ce1549cfc2e27764883fedb192f02', class: container(), style: this.getRadioStyle() }, h("input", { key: '7dabc73fa0ea4707943db1cc5ab77b6381409b75', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: 'ac815a1849d2c415203a2084ad8f5ce518478a79', class: dotContainer() }, h("div", { key: 'b36a046d5abc43ef3cbe18fc3e938e31c5069a1d', class: dot() })), h("span", { key: 'fc3bdf6839bb08d9d4b3c0a415c49f867d4d5077', class: labelClass() }, h("slot", { key: '9cfd3891ac6650f717a97c5e6268158b2ef5b0ce' }, this.label))));
     }
     static get is() { return "bcm-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../src/components/radio/radio.component.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n \n @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n * Option 1\n * </bcm-radio>\n \n @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n * Error Option\n * </bcm-radio>\n \n @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' \| 'medium' \| 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' \| 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n \n @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n \n @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n /\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n tag: 'bcm-radio',\n styleUrl: 'radio.css',\n shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n @Element() host: HTMLBcmRadioElement;\n\n /\n The text label to display next to the radio button.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n label: string;\n\n /\n The name attribute for the radio input, used to group radio buttons.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n name: string;\n\n /\n The value of the radio button, submitted with the form.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n value: string;\n\n /\n Whether the radio button is selected.\n * @prop\n * @defaultValue false\n /\n @Prop({ reflect: true })\n checked: boolean = false;\n\n /\n Defines the size of the radio button: 'small' \| 'medium' \| 'large'.\n * @prop\n * @defaultValue 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Whether the radio button is disabled.\n * @prop\n * @defaultValue false\n /\n @Prop()\n disabled = false;\n\n /\n Whether the radio button is readonly.\n * @prop\n * @defaultValue false\n /\n @Prop()\n readonly = false;\n\n /\n Position of the label relative to the radio button: 'right' \| 'left'.\n * @prop\n * @defaultValue 'right'\n /\n @Prop()\n labelPosition: 'right' \| 'left' = 'right';\n\n /\n Whether the radio button is in an error state.\n * @prop\n * @defaultValue false\n */\n @Prop()\n error: boolean = false;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmRadioChange',\n })\n bcmRadioChange: EventEmitter<void>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n private handleClick(): void {\n if (this.readonly \|\| this.disabled) return;\n if (!this.checked) {\n this.checked = true;\n this.bcmRadioChange.emit();\n }\n }\n\n private getRadioStyle() {\n const defaultStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n const errorStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n const disabledStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n };\n\n const readonlyStyle = {\n '--bcm-radio-bg': 'transparent',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.error && errorStyle),\n ...(this.disabled && disabledStyle),\n ...(this.readonly && readonlyStyle),\n };\n }\n\n private getRadioClass = tv(\n {\n slots: {\n container: 'bcm-ui-element bcm-radio group',\n dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n dotContainer:\n 'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n labelClass: 'font-medium text-[--bcm-radio-text-color]',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n dotContainer: 'size-3.5',\n dot: 'size-2',\n labelClass: 'text-size-4',\n },\n medium: {\n container: 'gap-2.5',\n dotContainer: 'size-4',\n dot: 'size-2.5',\n labelClass: 'text-size-5',\n },\n large: {\n container: 'gap-3',\n dotContainer: 'size-[18px]',\n dot: 'size-3',\n labelClass: 'text-size-6',\n },\n },\n checked: {\n true: {\n dot: 'opacity-100',\n },\n false: {\n dot: 'opacity-0',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer focus-visible:ring',\n },\n },\n readonly: {\n true: {\n container: 'cursor-default pointer-events-none',\n dot: 'opacity-100',\n dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n },\n false: '',\n },\n labelPosition: {\n left: {\n container: 'inline-flex flex-row-reverse items-center',\n },\n right: {\n container: 'inline-flex flex-row items-center',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n readonly: this.readonly,\n labelPosition: this.labelPosition,\n });\n\n return (\n <label class={container()} style={this.getRadioStyle()}>\n <input\n aria-label={this.label}\n role=\"radio\"\n aria-checked={this.checked.toString()}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n checked={this.checked}\n class=\"appearance-none sr-only\"\n onClick={() => this.handleClick()}\n onFocus={e => this.bcmFocus.emit(e)}\n onBlur={e => this.bcmBlur.emit(e)}\n ></input>\n <div class={dotContainer()}>\n <div class={dot()}></div>\n </div>\n <span class={labelClass()}>\n <slot>{this.label}</slot>\n </span>\n </label>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../src/components/radio/radio.component.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n \n @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n * Option 1\n * </bcm-radio>\n \n @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n * Error Option\n * </bcm-radio>\n \n @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' \| 'medium' \| 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' \| 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n \n @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n \n @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n /\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n tag: 'bcm-radio',\n styleUrl: 'radio.css',\n shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n @Element() host: HTMLBcmRadioElement;\n\n /\n The text label to display next to the radio button.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n label: string;\n\n /\n The name attribute for the radio input, used to group radio buttons.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n name: string;\n\n /\n The value of the radio button, submitted with the form.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n value: string;\n\n /\n Whether the radio button is selected.\n * @prop\n * @defaultValue false\n /\n @Prop({ reflect: true })\n checked: boolean = false;\n\n /\n Defines the size of the radio button: 'small' \| 'medium' \| 'large'.\n * @prop\n * @defaultValue 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Whether the radio button is disabled.\n * @prop\n * @defaultValue false\n /\n @Prop()\n disabled = false;\n\n /\n Whether the radio button is readonly.\n * @prop\n * @defaultValue false\n /\n @Prop()\n readonly = false;\n\n /\n Position of the label relative to the radio button: 'right' \| 'left'.\n * @prop\n * @defaultValue 'right'\n /\n @Prop()\n labelPosition: 'right' \| 'left' = 'right';\n\n /\n Whether the radio button is in an error state.\n * @prop\n * @defaultValue false\n */\n @Prop()\n error: boolean = false;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmRadioChange',\n })\n bcmRadioChange: EventEmitter<void>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmBlur: EventEmitter<FocusEvent>;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmFocus: EventEmitter<FocusEvent>;\n\n private handleClick(): void {\n if (this.readonly \|\| this.disabled) return;\n if (!this.checked) {\n this.checked = true;\n this.bcmRadioChange.emit();\n }\n }\n\n private getRadioStyle() {\n const defaultStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n const errorStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n const disabledStyle = {\n '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n };\n\n const readonlyStyle = {\n '--bcm-radio-bg': 'transparent',\n '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.error && errorStyle),\n ...(this.disabled && disabledStyle),\n ...(this.readonly && readonlyStyle),\n };\n }\n\n private getRadioClass = tv(\n {\n slots: {\n container: 'bcm-ui-element bcm-radio group',\n dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n dotContainer:\n 'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n labelClass: 'font-medium text-[--bcm-radio-text-color]',\n },\n variants: {\n size: {\n small: {\n container: 'gap-2',\n dotContainer: 'size-3.5',\n dot: 'size-2',\n labelClass: 'text-size-4',\n },\n medium: {\n container: 'gap-2.5',\n dotContainer: 'size-4',\n dot: 'size-2.5',\n labelClass: 'text-size-5',\n },\n large: {\n container: 'gap-3',\n dotContainer: 'size-[18px]',\n dot: 'size-3',\n labelClass: 'text-size-6',\n },\n },\n checked: {\n true: {\n dot: 'opacity-100',\n },\n false: {\n dot: 'opacity-0',\n },\n },\n disabled: {\n true: {\n container: 'cursor-not-allowed',\n },\n false: {\n container: 'cursor-pointer focus-visible:ring',\n },\n },\n readonly: {\n true: {\n container: 'cursor-default pointer-events-none',\n dot: 'opacity-100',\n dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n },\n false: '',\n },\n labelPosition: {\n left: {\n container: 'inline-flex flex-row-reverse items-center',\n },\n right: {\n container: 'inline-flex flex-row items-center',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n readonly: this.readonly,\n labelPosition: this.labelPosition,\n });\n\n return (\n <label class={container()} style={this.getRadioStyle()}>\n <input\n aria-label={this.label}\n role=\"radio\"\n aria-checked={this.checked.toString()}\n type=\"radio\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n checked={this.checked}\n class=\"appearance-none sr-only\"\n onClick={() => this.handleClick()}\n onFocus={e => this.bcmFocus.emit(e)}\n onBlur={e => this.bcmBlur.emit(e)}\n ></input>\n <div class={dotContainer()}>\n <div class={dot()}></div>\n </div>\n <span class={labelClass()}>\n <slot>{this.label}</slot>\n </span>\n </label>\n );\n }\n}\n"]}

package/dist/collection/components/radio-group/radio-group.component.js CHANGED Viewed

@@ -45,7 +45,7 @@
  * @csspart caption - The caption text below the radio group.
  */
 import { h } from "@stencil/core";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 import { generateId } from "../../utils/id/generate-id";
 import classNames from "classnames";
 export class BcmRadioGroup {
@@ -139,7 +139,7 @@ export class BcmRadioGroup {
      */
     async setClear() {
         var _a;
-        this.value = "";
+        this.value = '';
         (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
             radio.checked = false;
         });
@@ -178,14 +178,14 @@ export class BcmRadioGroup {
             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,

package/dist/collection/components/radio-group/radio-group.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n \n @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n \n @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n \n @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' \| 'medium' \| 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' \| 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n \n @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n \n @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n \n @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n /\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'bcm-radio-group',\n styleUrl: 'radio-group.css',\n shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n @Element() host: HTMLBcmRadioGroupElement;\n\n /\n The name attribute for the radio group, used to group radio buttons.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n name: string;\n\n /\n The currently selected value of the radio group.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n value: string;\n\n /\n Whether the radio group and its radio buttons are disabled.\n * @prop\n * @defaultValue false\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Whether the radio group is required in a form.\n * @prop\n * @defaultValue false\n /\n @Prop()\n required: boolean = false;\n\n /\n Whether the radio group is in an error state.\n * @prop\n * @defaultValue false\n /\n @Prop()\n error: boolean = false;\n\n /\n The label text to display above the radio group.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n label: string;\n\n /\n Defines the size of the radio group and its radio buttons: 'small' \| 'medium' \| 'large'.\n * @prop\n * @defaultValue 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The layout direction of the radio buttons: 'horizontal' \| 'vertical'.\n * @prop\n * @defaultValue 'vertical'\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Optional caption text to display below the radio group, often used for error messages or hints.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n captionText?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmRadioGroupChange',\n })\n bcmRadioGroupChange: EventEmitter<any>;\n\n private readonly radioGroupName = generateId('radio-group-name');\n\n get radios() {\n return this.host.querySelectorAll('bcm-radio');\n }\n\n componentWillLoad() {\n if (this.value) {\n this.updateRadios(this.value);\n }\n }\n\n /\n Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n * @method\n /\n @Method()\n async setClear() {\n this.value = \"\";\n this.radios?.forEach(radio => {\n radio.checked = false;\n });\n }\n\n /\n Resets the error state and caption.\n * @method\n /\n @Method()\n async resetCaption() {\n this.error = false;\n this.captionText = undefined;\n }\n\n private handleSlotChange = () => {\n this.radios.forEach(radio => {\n radio.size = this.size;\n radio.name = this.name ?? this.radioGroupName;\n radio.disabled = this.disabled;\n radio.error = this.error;\n });\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.updateRadios(newValue);\n }\n\n @Listen('bcmRadioChange', { capture: true })\n handleRadioChange(event: CustomEvent) {\n const radio = event.target as HTMLBcmRadioElement;\n const radios = this.host.querySelectorAll('bcm-radio');\n radios.forEach(r => {\n if (r !== radio) {\n r.checked = false;\n }\n });\n this.bcmRadioGroupChange.emit({\n value: radio.value,\n element: radio,\n });\n }\n\n private updateRadios(value: string) {\n this.radios.forEach(radio => {\n radio.checked = radio.value === value;\n });\n }\n\n private radioGroupClass = tv({\n slots: {\n host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n container: ['flex'],\n },\n variants: {\n size: {\n small: {\n host: 'gap-1.5',\n container: 'gap-1.5',\n },\n medium: {\n host: 'gap-2',\n container: 'gap-2',\n },\n large: {\n host: 'gap-2.5',\n container: 'gap-2.5',\n },\n },\n direction: {\n horizontal: {\n container: ['flex-row flex-wrap'],\n },\n vertical: {\n container: ['flex-col'],\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n direction: 'vertical',\n },\n });\n\n render() {\n const { host, container } = this.radioGroupClass({\n size: this.size,\n direction: this.direction,\n });\n return (\n <div class={host()}>\n {this.label && (\n <label\n class={classNames(\n 'input-label font-medium',\n {\n 'text-color-label': !this.disabled,\n 'text-color-disabled': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span></span>}\n </label>\n )}\n <div class={container()}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n\n {this.captionText && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled,\n 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n 'text-[--bcm-ui-color-text-disabled]': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n {this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n \n @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n \n @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n * <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n * <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n \n @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' \| 'medium' \| 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' \| 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n \n @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n \n @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n \n @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n /\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'bcm-radio-group',\n styleUrl: 'radio-group.css',\n shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n @Element() host: HTMLBcmRadioGroupElement;\n\n /\n The name attribute for the radio group, used to group radio buttons.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n name: string;\n\n /\n The currently selected value of the radio group.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n value: string;\n\n /\n Whether the radio group and its radio buttons are disabled.\n * @prop\n * @defaultValue false\n /\n @Prop()\n disabled: boolean = false;\n\n /\n Whether the radio group is required in a form.\n * @prop\n * @defaultValue false\n /\n @Prop()\n required: boolean = false;\n\n /\n Whether the radio group is in an error state.\n * @prop\n * @defaultValue false\n /\n @Prop()\n error: boolean = false;\n\n /\n The label text to display above the radio group.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n label: string;\n\n /\n Defines the size of the radio group and its radio buttons: 'small' \| 'medium' \| 'large'.\n * @prop\n * @defaultValue 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The layout direction of the radio buttons: 'horizontal' \| 'vertical'.\n * @prop\n * @defaultValue 'vertical'\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Optional caption text to display below the radio group, often used for error messages or hints.\n * @prop\n * @defaultValue undefined\n /\n @Prop()\n captionText?: string;\n\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n eventName: 'bcmRadioGroupChange',\n })\n bcmRadioGroupChange: EventEmitter<any>;\n\n private readonly radioGroupName = generateId('radio-group-name');\n\n get radios() {\n return this.host.querySelectorAll('bcm-radio');\n }\n\n componentWillLoad() {\n if (this.value) {\n this.updateRadios(this.value);\n }\n }\n\n /\n Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n * @method\n /\n @Method()\n async setClear() {\n this.value = '';\n this.radios?.forEach(radio => {\n radio.checked = false;\n });\n }\n\n /\n Resets the error state and caption.\n * @method\n /\n @Method()\n async resetCaption() {\n this.error = false;\n this.captionText = undefined;\n }\n\n private handleSlotChange = () => {\n this.radios.forEach(radio => {\n radio.size = this.size;\n radio.name = this.name ?? this.radioGroupName;\n radio.disabled = this.disabled;\n radio.error = this.error;\n });\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.updateRadios(newValue);\n }\n\n @Listen('bcmRadioChange', { capture: true })\n handleRadioChange(event: CustomEvent) {\n const radio = event.target as HTMLBcmRadioElement;\n const radios = this.host.querySelectorAll('bcm-radio');\n radios.forEach(r => {\n if (r !== radio) {\n r.checked = false;\n }\n });\n this.bcmRadioGroupChange.emit({\n value: radio.value,\n element: radio,\n });\n }\n\n private updateRadios(value: string) {\n this.radios.forEach(radio => {\n radio.checked = radio.value === value;\n });\n }\n\n private radioGroupClass = tv({\n slots: {\n host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n container: ['flex'],\n },\n variants: {\n size: {\n small: {\n host: 'gap-1.5',\n container: 'gap-1.5',\n },\n medium: {\n host: 'gap-2',\n container: 'gap-2',\n },\n large: {\n host: 'gap-2.5',\n container: 'gap-2.5',\n },\n },\n direction: {\n horizontal: {\n container: ['flex-row flex-wrap'],\n },\n vertical: {\n container: ['flex-col'],\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n direction: 'vertical',\n },\n });\n\n render() {\n const { host, container } = this.radioGroupClass({\n size: this.size,\n direction: this.direction,\n });\n return (\n <div class={host()}>\n {this.label && (\n <label\n class={classNames(\n 'input-label font-medium',\n {\n 'text-color-label': !this.disabled,\n 'text-color-disabled': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n <slot name=\"label\">{this.label}</slot>\n {this.required && <span></span>}\n </label>\n )}\n <div class={container()}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n\n {this.captionText && (\n <div\n class={classNames(\n 'input-caption-text font-regular mt-1',\n {\n 'text-[--bcm-ui-color-text-caption]': !this.disabled,\n 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n 'text-[--bcm-ui-color-text-disabled]': this.disabled,\n },\n {\n 'text-size-3': this.size === 'small',\n 'text-size-4': this.size === 'medium',\n 'text-size-5': this.size === 'large',\n },\n )}\n >\n {this.captionText}\n </div>\n )}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/segmented-picker/segmented-picker-option.component.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 export class BcmSegmentedPickerOption {
     constructor() {
         /** Whether this option is selected */
@@ -84,11 +84,11 @@ export class BcmSegmentedPickerOption {
     render() {
         const size = this.size || this.getSizeFromParent();
         const disabled = this.isDisabled();
-        return (h(Host, { key: '0e1d1fa066ff7f75cefa08efc39d5403bcaa8939' }, h("button", { key: '6d7f2ccc063979c6f7ebc39780ce599bdf0544d9', class: this.optionClass({
+        return (h(Host, { key: '2a73da779908b67076dfea3943e83c9bd4e1164b' }, h("button", { key: 'a2f1efb0c73378026867bde6f9dd1cea4adb36c2', class: this.optionClass({
                 size,
                 selected: this.selected,
                 disabled,
-            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '4b0c5a40f76ef045964b32a3fa7c1a8f26aa5b66' }, this.label))));
+            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '62f4c0d40ffb4cbe2c7a0cc18c0adeb7689ff2df' }, this.label))));
     }
     static get is() { return "bcm-segmented-picker-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-picker/segmented-picker-option.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-picker-option.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker-option.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,EAAE,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAOvC~~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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SegmentedPickerSize } from './types';\nimport { tv } from '~~tailwind-variants~~';\n\n@Component({\n tag: 'bcm-segmented-picker-option',\n styleUrl: 'segmented-picker-option.css',\n shadow: true,\n})\nexport class BcmSegmentedPickerOption {\n @Element() host: HTMLElement;\n\n /** Option value /\n @Prop()\n value!: string;\n\n /* Option display label /\n @Prop()\n label?: string;\n\n /* Controls the option size /\n @Prop()\n size?: SegmentedPickerSize;\n\n /* Whether this option is selected /\n @Prop({ mutable: true })\n selected = false;\n\n /* Whether this option is disabled /\n @Prop()\n disabled = false;\n\n /* Click event */\n @Event({\n composed: false,\n bubbles: true,\n cancelable: true,\n })\n bcmOptionClick: EventEmitter<string>;\n\n private parentValueObserver: MutationObserver;\n private parentRef: HTMLElement \| null = null;\n\n componentWillLoad() {\n // Parent referansını al\n this.parentRef = this.host.closest('bcm-segmented-picker');\n\n // İlk yüklemede selected durumu\n if (this.parentRef) {\n this.selected = this.parentRef.getAttribute('value') === this.value;\n }\n }\n\n componentDidLoad() {\n // DOM yüklendikten sonra sadece parent değer değişikliklerini gözlemeye başla\n // Burada artık prop değişikliği yok\n this.setupValueObserver();\n }\n\n disconnectedCallback() {\n if (this.parentValueObserver) {\n this.parentValueObserver.disconnect();\n }\n }\n\n private setupValueObserver() {\n if (this.parentRef) {\n this.parentValueObserver = new MutationObserver(() => {\n this.selected = this.isValueSelected();\n });\n this.parentValueObserver.observe(this.parentRef, { attributes: true, attributeFilter: ['value'] });\n }\n }\n\n private isValueSelected(): boolean {\n return this.parentRef?.getAttribute('value') === this.value;\n }\n\n private getSizeFromParent(): SegmentedPickerSize {\n return (this.parentRef?.getAttribute('size') as SegmentedPickerSize) \|\| 'medium';\n }\n\n private isDisabled(): boolean {\n return this.disabled \|\| this.parentRef?.hasAttribute('disabled') \|\| false;\n }\n\n private handleClick = () => {\n if (this.isDisabled()) return;\n this.bcmOptionClick.emit(this.value);\n };\n\n @Method()\n async getWidth(): Promise<number> {\n const element = this.host.shadowRoot?.querySelector('.segmented-option');\n return element?.getBoundingClientRect().width \|\| 0;\n }\n\n private optionClass = tv(\n {\n base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',\n variants: {\n size: {\n small: 'py-[1px] px-3 text-size-4',\n medium: 'py-[3px] px-3 text-size-5',\n large: 'py-[6px] px-3 text-size-6',\n },\n selected: {\n true: 'text-[--bcm-ui-color-text-header]',\n false: 'text-[--bcm-ui-color-text-helper]',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n size: 'medium',\n selected: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const size = this.size \|\| this.getSizeFromParent();\n const disabled = this.isDisabled();\n\n return (\n <Host>\n <button\n class={this.optionClass({\n size,\n selected: this.selected,\n disabled,\n })}\n onClick={this.handleClick}\n disabled={disabled}\n type=\"button\"\n >\n <slot>{this.label}</slot>\n </button>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"segmented-picker-option.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker-option.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SegmentedPickerSize } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n tag: 'bcm-segmented-picker-option',\n styleUrl: 'segmented-picker-option.css',\n shadow: true,\n})\nexport class BcmSegmentedPickerOption {\n @Element() host: HTMLElement;\n\n /** Option value /\n @Prop()\n value!: string;\n\n /* Option display label /\n @Prop()\n label?: string;\n\n /* Controls the option size /\n @Prop()\n size?: SegmentedPickerSize;\n\n /* Whether this option is selected /\n @Prop({ mutable: true })\n selected = false;\n\n /* Whether this option is disabled /\n @Prop()\n disabled = false;\n\n /* Click event */\n @Event({\n composed: false,\n bubbles: true,\n cancelable: true,\n })\n bcmOptionClick: EventEmitter<string>;\n\n private parentValueObserver: MutationObserver;\n private parentRef: HTMLElement \| null = null;\n\n componentWillLoad() {\n // Parent referansını al\n this.parentRef = this.host.closest('bcm-segmented-picker');\n\n // İlk yüklemede selected durumu\n if (this.parentRef) {\n this.selected = this.parentRef.getAttribute('value') === this.value;\n }\n }\n\n componentDidLoad() {\n // DOM yüklendikten sonra sadece parent değer değişikliklerini gözlemeye başla\n // Burada artık prop değişikliği yok\n this.setupValueObserver();\n }\n\n disconnectedCallback() {\n if (this.parentValueObserver) {\n this.parentValueObserver.disconnect();\n }\n }\n\n private setupValueObserver() {\n if (this.parentRef) {\n this.parentValueObserver = new MutationObserver(() => {\n this.selected = this.isValueSelected();\n });\n this.parentValueObserver.observe(this.parentRef, { attributes: true, attributeFilter: ['value'] });\n }\n }\n\n private isValueSelected(): boolean {\n return this.parentRef?.getAttribute('value') === this.value;\n }\n\n private getSizeFromParent(): SegmentedPickerSize {\n return (this.parentRef?.getAttribute('size') as SegmentedPickerSize) \|\| 'medium';\n }\n\n private isDisabled(): boolean {\n return this.disabled \|\| this.parentRef?.hasAttribute('disabled') \|\| false;\n }\n\n private handleClick = () => {\n if (this.isDisabled()) return;\n this.bcmOptionClick.emit(this.value);\n };\n\n @Method()\n async getWidth(): Promise<number> {\n const element = this.host.shadowRoot?.querySelector('.segmented-option');\n return element?.getBoundingClientRect().width \|\| 0;\n }\n\n private optionClass = tv(\n {\n base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',\n variants: {\n size: {\n small: 'py-[1px] px-3 text-size-4',\n medium: 'py-[3px] px-3 text-size-5',\n large: 'py-[6px] px-3 text-size-6',\n },\n selected: {\n true: 'text-[--bcm-ui-color-text-header]',\n false: 'text-[--bcm-ui-color-text-helper]',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n size: 'medium',\n selected: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n const size = this.size \|\| this.getSizeFromParent();\n const disabled = this.isDisabled();\n\n return (\n <Host>\n <button\n class={this.optionClass({\n size,\n selected: this.selected,\n disabled,\n })}\n onClick={this.handleClick}\n disabled={disabled}\n type=\"button\"\n >\n <slot>{this.label}</slot>\n </button>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/segmented-picker/segmented-picker.component.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 export class BcmSegmentedPicker {
     constructor() {
         /** Controls the component size */
@@ -118,11 +118,11 @@ export class BcmSegmentedPicker {
         }, 10);
     }
     render() {
-        return (h(Host, { key: '00a61b095c03ee5a5714a2bf1efa358056cc48bd' }, h("div", { key: '75ea4056395d589e486c9ef45c33eecbc1eca8c8', class: this.segmentedClass({
+        return (h(Host, { key: 'da5fd3ac598c6e782387ead9a994c3e2cffb0120' }, h("div", { key: '8095a9eb1c5cc455989402ca89ef45ad8799cc4c', class: this.segmentedClass({
                 size: this.size,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
-            }) }, h("div", { key: '9a3c63b6730b64ebacd59d2b548cc94a181c1e9e', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: 'ac1d2c0765dc1ff246a5fc81815d1e1e10630d8d', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: 'b5e21f3e8ee7d55736f034fe3e92662510a65973' })))));
+            }) }, h("div", { key: '09be9fc279d015a8d1050591ea287ca192f2e1ea', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '41b20cd2a9a5b3abe7bda035c91c801a211c0f23', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '102516eba6f3470073e54fba0943efb26037b8a4' })))));
     }
     static get is() { return "bcm-segmented-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-picker/segmented-picker.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-picker.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAE,EAAE,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAQvC~~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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen } from '@stencil/core';\nimport { tv } from '~~tailwind-variants~~';\nimport { SegmentedPickerSize } from './types';\n\n@Component({\n tag: 'bcm-segmented-picker',\n styleUrl: 'segmented-picker.css',\n shadow: true,\n})\nexport class BcmSegmentedPicker {\n @Element() host: HTMLElement;\n\n /** Controls the component size /\n @Prop()\n size: SegmentedPickerSize = 'medium';\n\n /* The selected option value /\n @Prop({ mutable: true, reflect: true })\n value?: string;\n\n /* Disabled state /\n @Prop()\n disabled = false;\n\n /* Full width component /\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /* Change event */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmChange: EventEmitter<{ value: string }>;\n\n @State() options: Array<{ value: string; label: string }> = [];\n @State() indicatorStyles: { left: string; width: string; transition: string } = {\n left: '0',\n width: '0',\n transition: 'none',\n };\n\n componentWillLoad() {\n // İlk yüklemede options'ları belirle\n this.parseOptions();\n\n // Eğer value belirtilmemişse ve options varsa, ilk option'ı seç\n if (!this.value && this.options.length > 0) {\n this.value = this.options[0].value;\n }\n }\n\n componentDidLoad() {\n // DOM yüklendikten sonra sadece gösterge pozisyonunu güncelle\n this.updateIndicatorPosition(false);\n }\n\n componentDidUpdate() {\n this.updateIndicatorPosition();\n }\n\n @Watch('value')\n valueChanged() {\n this.updateIndicatorPosition();\n }\n\n @Listen('bcmOptionClick')\n handleOptionClick(event: CustomEvent<string>) {\n if (this.disabled) return;\n\n const value = event.detail;\n if (this.value !== value) {\n this.value = value;\n this.bcmChange.emit({ value });\n }\n }\n\n private parseOptions() {\n const slotNodes = Array.from(this.host.children);\n this.options = slotNodes\n .filter(node => node.nodeName.toLowerCase() === 'bcm-segmented-picker-option')\n .map(option => ({\n value: option.getAttribute('value') \|\| '',\n label: option.getAttribute('label') \|\| option.textContent \|\| '',\n }));\n }\n\n private updateIndicatorPosition(animate = true) {\n // Seçili option elemanını bul\n const selectedOption = this.host.querySelector(`bcm-segmented-picker-option[value=\"${this.value}\"]`) as HTMLElement;\n if (!selectedOption) return;\n\n // Tüm option'ları seç\n const allOptions = this.host.querySelectorAll('bcm-segmented-picker-option');\n\n // Seçili option'ın indeksini bul\n let selectedIndex = -1;\n for (let i = 0; i < allOptions.length; i++) {\n if (allOptions[i].getAttribute('value') === this.value) {\n selectedIndex = i;\n break;\n }\n }\n\n if (selectedIndex === -1) return;\n\n // DOM manipülasyonu asenkron olarak yap\n setTimeout(() => {\n try {\n // Seçili option'a kadar olan genişliği hesapla\n let leftPosition = 0;\n\n for (let i = 0; i < selectedIndex; i++) {\n const optionElement = allOptions[i] as HTMLElement;\n if (optionElement) {\n leftPosition += optionElement.offsetWidth;\n }\n }\n\n // Seçili option'ın genişliği\n const selectedWidth = (allOptions[selectedIndex] as HTMLElement).offsetWidth;\n\n // İndikatör stillerini güncelle\n this.indicatorStyles = {\n left: `${leftPosition}px`,\n width: `${selectedWidth}px`,\n transition: animate ? 'all 0.2s ease-in-out' : 'none',\n };\n } catch (error) {\n console.error('Error updating indicator position:', error);\n }\n }, 10);\n }\n\n private segmentedClass = tv(\n {\n base: 'segmented-container bcm-ui-element inline-flex relative bg-[--bcm-ui-color-background-default-default] border border-solid border-[--bcm-ui-color-border-default] rounded overflow-hidden',\n variants: {\n size: {\n small: 'text-size-4',\n medium: 'text-size-5',\n large: 'text-size-6',\n },\n fullWidth: {\n true: 'w-full',\n },\n disabled: {\n true: 'opacity-50 cursor-not-allowed',\n false: 'cursor-pointer',\n },\n },\n defaultVariants: {\n size: 'medium',\n fullWidth: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <Host>\n <div\n class={this.segmentedClass({\n size: this.size,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n })}\n >\n <div class=\"segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded\" style={this.indicatorStyles}></div>\n <div class=\"segmented-options flex relative z-10 w-full\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"segmented-picker.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { SegmentedPickerSize } from './types';\n\n@Component({\n tag: 'bcm-segmented-picker',\n styleUrl: 'segmented-picker.css',\n shadow: true,\n})\nexport class BcmSegmentedPicker {\n @Element() host: HTMLElement;\n\n /** Controls the component size /\n @Prop()\n size: SegmentedPickerSize = 'medium';\n\n /* The selected option value /\n @Prop({ mutable: true, reflect: true })\n value?: string;\n\n /* Disabled state /\n @Prop()\n disabled = false;\n\n /* Full width component /\n @Prop({ attribute: 'full-width', reflect: true })\n fullWidth = false;\n\n /* Change event */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmChange: EventEmitter<{ value: string }>;\n\n @State() options: Array<{ value: string; label: string }> = [];\n @State() indicatorStyles: { left: string; width: string; transition: string } = {\n left: '0',\n width: '0',\n transition: 'none',\n };\n\n componentWillLoad() {\n // İlk yüklemede options'ları belirle\n this.parseOptions();\n\n // Eğer value belirtilmemişse ve options varsa, ilk option'ı seç\n if (!this.value && this.options.length > 0) {\n this.value = this.options[0].value;\n }\n }\n\n componentDidLoad() {\n // DOM yüklendikten sonra sadece gösterge pozisyonunu güncelle\n this.updateIndicatorPosition(false);\n }\n\n componentDidUpdate() {\n this.updateIndicatorPosition();\n }\n\n @Watch('value')\n valueChanged() {\n this.updateIndicatorPosition();\n }\n\n @Listen('bcmOptionClick')\n handleOptionClick(event: CustomEvent<string>) {\n if (this.disabled) return;\n\n const value = event.detail;\n if (this.value !== value) {\n this.value = value;\n this.bcmChange.emit({ value });\n }\n }\n\n private parseOptions() {\n const slotNodes = Array.from(this.host.children);\n this.options = slotNodes\n .filter(node => node.nodeName.toLowerCase() === 'bcm-segmented-picker-option')\n .map(option => ({\n value: option.getAttribute('value') \|\| '',\n label: option.getAttribute('label') \|\| option.textContent \|\| '',\n }));\n }\n\n private updateIndicatorPosition(animate = true) {\n // Seçili option elemanını bul\n const selectedOption = this.host.querySelector(`bcm-segmented-picker-option[value=\"${this.value}\"]`) as HTMLElement;\n if (!selectedOption) return;\n\n // Tüm option'ları seç\n const allOptions = this.host.querySelectorAll('bcm-segmented-picker-option');\n\n // Seçili option'ın indeksini bul\n let selectedIndex = -1;\n for (let i = 0; i < allOptions.length; i++) {\n if (allOptions[i].getAttribute('value') === this.value) {\n selectedIndex = i;\n break;\n }\n }\n\n if (selectedIndex === -1) return;\n\n // DOM manipülasyonu asenkron olarak yap\n setTimeout(() => {\n try {\n // Seçili option'a kadar olan genişliği hesapla\n let leftPosition = 0;\n\n for (let i = 0; i < selectedIndex; i++) {\n const optionElement = allOptions[i] as HTMLElement;\n if (optionElement) {\n leftPosition += optionElement.offsetWidth;\n }\n }\n\n // Seçili option'ın genişliği\n const selectedWidth = (allOptions[selectedIndex] as HTMLElement).offsetWidth;\n\n // İndikatör stillerini güncelle\n this.indicatorStyles = {\n left: `${leftPosition}px`,\n width: `${selectedWidth}px`,\n transition: animate ? 'all 0.2s ease-in-out' : 'none',\n };\n } catch (error) {\n console.error('Error updating indicator position:', error);\n }\n }, 10);\n }\n\n private segmentedClass = tv(\n {\n base: 'segmented-container bcm-ui-element inline-flex relative bg-[--bcm-ui-color-background-default-default] border border-solid border-[--bcm-ui-color-border-default] rounded overflow-hidden',\n variants: {\n size: {\n small: 'text-size-4',\n medium: 'text-size-5',\n large: 'text-size-6',\n },\n fullWidth: {\n true: 'w-full',\n },\n disabled: {\n true: 'opacity-50 cursor-not-allowed',\n false: 'cursor-pointer',\n },\n },\n defaultVariants: {\n size: 'medium',\n fullWidth: false,\n disabled: false,\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <Host>\n <div\n class={this.segmentedClass({\n size: this.size,\n fullWidth: this.fullWidth,\n disabled: this.disabled,\n })}\n >\n <div class=\"segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded\" style={this.indicatorStyles}></div>\n <div class=\"segmented-options flex relative z-10 w-full\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/switch/switch.component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { generateId } from "../../utils/id/generate-id";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 /**
  * @component BcmSwitch
  * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
@@ -190,12 +190,12 @@ export class BcmSwitch {
         });
         const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
         const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
-        return (h("div", { key: 'd18db7b849420ad3c416efa4e7d4eddef524afa0', class: base() }, h("label", { key: 'c7d35ad070759d134a4d4aa3b07144407b3f412a', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: '0690f7e509de7093f513bca1819c30370f720f40', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && h("span", { key: 'fbb5d10e306c5d6b97dcfc9fc3ed2f075a2e2869', class: label() }, h("slot", { key: 'b9cd0cb2b0a95420fcd146b326865f9b030fea3d' }, this.label)), h("label", Object.assign({ key: 'f04c6cf35a56b203d96776b26e4a167b6b81e748', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        return (h("div", { key: '6073bf409136e2470b9dbb4086b275bbae37e0cf', class: base() }, h("label", { key: '2f4aabe9e2faa9e6427722923b7b671fdde63d0d', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: '790195d6a1e03f81d2c3c0582e35053fdcbf88de', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && (h("span", { key: '696ed4067822d9cb2c6c259ddc7e89add1e84550', class: label() }, h("slot", { key: '9ee1058077e3e26e90fc662756964504f6f8449c' }, this.label))), h("label", Object.assign({ key: '7fbc66b8357a5af8200279fd9b2c705f0d73530b', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
                 if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
                     event.preventDefault();
                     this.toggleSwitch();
                 }
-            } }), h("div", { key: '5ec215b19c3772cdf2f2bd9213ea5583786b07f7', class: dot() }))), this.error && this.caption && h("span", { key: '0ed49573afdfa297ec8930b0408c8e8ec3bdc384', class: caption() }, this.caption), h("slot", { key: 'ead6fd77bd9bd97b14e69367fd90e1c474b5d4c3', name: "caption" })));
+            } }), h("div", { key: '0ee2aca9dddfcd1c4cd52dd60d6f1964e6dcdd28', class: dot() }))), this.error && this.caption && h("span", { key: '80000e73d4f695d5620ed3347350ed049a247bf9', class: caption() }, this.caption), h("slot", { key: '6bfa76d6062426e21c6c41474fb102177d304a1f', name: "caption" })));
     }
     static get is() { return "bcm-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.component.js","sourceRoot":"","sources":["../../../src/components/switch/switch.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n \n @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n \n @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n \n @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n \n @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n /\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /* Reference to the host element /\n @Element()\n el: HTMLElement;\n\n /* Whether the switch is checked or not /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Whether the switch is disabled /\n @Prop()\n disabled: boolean = false;\n\n /* The name attribute for the hidden input element /\n @Prop()\n name: string;\n\n /* The value attribute for the hidden input element /\n @Prop()\n value: string;\n\n /* Text label for the switch /\n @Prop()\n label: string;\n\n /* Position of the label relative to the switch /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /* Whether to display the switch in an error state /\n @Prop()\n error: boolean = false;\n\n /* Text to display as an error message when error is true /\n @Prop()\n caption?: string;\n\n /* Size variant of the switch /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Whether the switch is in readonly mode /\n @Prop()\n readonly: boolean = false;\n\n /* Whether the switch is required in a form /\n @Prop()\n required: boolean = false;\n\n /* Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled \|\| this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[18px]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[18px]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[20px]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[22px]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && <span class={label()}><slot>{this.label}</slot></span>}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"switch.component.js","sourceRoot":"","sources":["../../../src/components/switch/switch.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/*\n @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n \n @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n \n @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n \n @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n \n @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n /\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /* Reference to the host element /\n @Element()\n el: HTMLElement;\n\n /* Whether the switch is checked or not /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Whether the switch is disabled /\n @Prop()\n disabled: boolean = false;\n\n /* The name attribute for the hidden input element /\n @Prop()\n name: string;\n\n /* The value attribute for the hidden input element /\n @Prop()\n value: string;\n\n /* Text label for the switch /\n @Prop()\n label: string;\n\n /* Position of the label relative to the switch /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /* Whether to display the switch in an error state /\n @Prop()\n error: boolean = false;\n\n /* Text to display as an error message when error is true /\n @Prop()\n caption?: string;\n\n /* Size variant of the switch /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Whether the switch is in readonly mode /\n @Prop()\n readonly: boolean = false;\n\n /* Whether the switch is required in a form /\n @Prop()\n required: boolean = false;\n\n /* Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled \|\| this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[18px]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[18px]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[20px]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[22px]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && (\n <span class={label()}>\n <slot>{this.label}</slot>\n </span>\n )}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/tabs/tabs-list.component.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 /**
  * @description Container component for tab triggers that includes the sliding indicator (inkbar)
  * @slot - Default slot for tab trigger elements
@@ -28,7 +28,7 @@ export class BcmTabsList {
     }
     render() {
         const { container, inkbar, tabList } = this.class();
-        return (h("div", { key: '4dbd9f1b18b6529d8b772a27a6f6ab0cbf789b48', class: container(), slot: "tabs-list" }, h("div", { key: 'f7bc6bb41afb0d76f66cb7a7af70875cf5359da8', class: inkbar() }), h("div", { key: '95aa03b5f1955517c9f3fce41ce3b525bfb56ac0', class: tabList(), role: "tablist" }, h("slot", { key: 'a3d0a910a2f7a07dd2f1e25b0d14d2c0d830e5fb' }))));
+        return (h("div", { key: '9752a4024488845eda6a6701818364dab7fe96f2', class: container(), slot: "tabs-list" }, h("div", { key: 'c97ec0649dc5054b1dc374e5dd47d37eaaf0001a', class: inkbar() }), h("div", { key: 'f0da62c82904ad4bc90cf02ec19c3da48118471c', class: tabList(), role: "tablist" }, h("slot", { key: 'c4f7086fac00127505adfc74032bc4a2cd8fbb11' }))));
     }
     static get is() { return "bcm-tabs-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs-list.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-list.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAEvC~~;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;~~QAMI~~;;WAEG;QACK,UAAK,GAAG,EAAE,CAAC;~~YACf~~,KAAK,EAAE;~~gBACH~~;;mBAEG;gBACH,SAAS,EAAE,4CAA4C;gBAEvD;;mBAEG;gBACH,MAAM,EAAE,uIAAuI;gBAE/I;;mBAEG;gBACH,OAAO,EAAE,sDAAsD;~~aAClE~~;~~SACJ~~,CAAC,CAAC;~~KAaN~~;~~IAXG~~,MAAM;~~QACF~~,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACpD,OAAO,~~CACH~~,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW;~~YACrC~~,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ;YAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS;~~gBACjC~~,8DAAa,~~CACX~~,~~CACJ~~,~~CACT~~,CAAC;~~IACN~~,CAAC;;;;;;;;;~~CACJ~~","sourcesContent":["import { Component, h, ComponentInterface } from '@stencil/core';\nimport { tv } from '~~tailwind-variants~~';\n\n/*\n @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n /\n@Component({\n tag: 'bcm-tabs-list',\n styleUrl: 'tabs-list.css',\n shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n /\n Tailwind variants configuration for styling the tabs list container and inkbar\n /\n private class = tv({\n slots: {\n /\n Main container that holds both the tablist and inkbar\n /\n container: 'flex flex-row items-center w-full relative',\n\n /\n The sliding indicator that appears under the active tab\n /\n inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',\n\n /\n The container for tab trigger elements\n */\n tabList: 'tabs-list flex flex-row items-center w-full relative',\n },\n });\n\n render() {\n const { container, inkbar, tabList } = this.class();\n return (\n <div class={container()} slot=\"tabs-list\">\n <div class={inkbar()}></div>\n <div class={tabList()} role=\"tablist\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"tabs-list.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;WAEG;QACK,UAAK,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;gBACL;;mBAEG;gBACH,SAAS,EAAE,4CAA4C;gBAEvD;;mBAEG;gBACH,MAAM,EAAE,uIAAuI;gBAE/I;;mBAEG;gBACH,OAAO,EAAE,sDAAsD;aAChE;SACF,CAAC,CAAC;KAaJ;IAXC,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACpD,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW;YACvC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ;YAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS;gBACnC,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/*\n @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n /\n@Component({\n tag: 'bcm-tabs-list',\n styleUrl: 'tabs-list.css',\n shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n /\n Tailwind variants configuration for styling the tabs list container and inkbar\n /\n private class = tv({\n slots: {\n /\n Main container that holds both the tablist and inkbar\n /\n container: 'flex flex-row items-center w-full relative',\n\n /\n The sliding indicator that appears under the active tab\n /\n inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',\n\n /\n The container for tab trigger elements\n */\n tabList: 'tabs-list flex flex-row items-center w-full relative',\n },\n });\n\n render() {\n const { container, inkbar, tabList } = this.class();\n return (\n <div class={container()} slot=\"tabs-list\">\n <div class={inkbar()}></div>\n <div class={tabList()} role=\"tablist\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/tabs/tabs-trigger.component.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
 /**
  * @description Tab trigger component that functions as a clickable tab button
  * @slot - Default slot for tab label content
@@ -75,7 +75,7 @@ export class BcmTabsTrigger {
             active: this.active,
             disabled: this.disabled,
         });
-        return (h(Host, { key: '97d1b4ff2e0d097843b57bf33e3afc337de12812', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'f8474ad1ccc08bb6985c4754546111cc5a1d7ef5', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: 'fd94dcc67f10ae7df1217b2545f2621d62906cdc' })), h("div", { key: '93f31a04c031061d929e3ca38758986775bac1ad', class: borderLine() })));
+        return (h(Host, { key: 'd8d56bc1536edf98cda1f2a2499d2c2442dc10f3', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'd943223c1fcc2876b3360af9ab4913f4dc4dd8e9', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '499f0f1586cc55e451396b588720aa81a488e253' })), h("div", { key: '73e8da795af83ced549dd45a118e72b23a84daed', class: borderLine() })));
     }
     static get is() { return "bcm-tabs-trigger"; }
     static get encapsulation() { return "shadow"; }