bromcom-ui-next 0.1.20 → 0.1.21

package/dist/esm/bcm-radio-group.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-radio-group.entry.js","mappings":"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","names":["tv"],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"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"],"version":3}
+{"file":"bcm-radio-group.entry.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,o+CAAo+C,CAAC;AAC3/C,4BAAe,aAAa;;MCwDf,aAAa;IAL1B;;;;;;;;QA8BE,aAAQ,GAAY,KAAK,CAAC;;;;;;QAQ1B,aAAQ,GAAY,KAAK,CAAC;;;;;;QAQ1B,UAAK,GAAY,KAAK,CAAC;;;;;;QAgBvB,SAAI,GAAiC,QAAQ,CAAC;;;;;;QAQ9C,cAAS,GAA8B,UAAU,CAAC;QAkBjC,mBAAc,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;QAkCzD,qBAAgB,GAAG;YACzB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;;gBACvB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACvB,KAAK,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,cAAc,CAAC;gBAC9C,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;gBAC/B,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aAC1B,CAAC,CAAC;SACJ,CAAC;QA4BM,oBAAe,GAAG,EAAE,CAAC;YAC3B,KAAK,EAAE;gBACL,IAAI,EAAE,CAAC,8CAA8C,CAAC;gBACtD,SAAS,EAAE,CAAC,MAAM,CAAC;aACpB;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,IAAI,EAAE,SAAS;wBACf,SAAS,EAAE,SAAS;qBACrB;oBACD,MAAM,EAAE;wBACN,IAAI,EAAE,OAAO;wBACb,SAAS,EAAE,OAAO;qBACnB;oBACD,KAAK,EAAE;wBACL,IAAI,EAAE,SAAS;wBACf,SAAS,EAAE,SAAS;qBACrB;iBACF;gBACD,SAAS,EAAE;oBACT,UAAU,EAAE;wBACV,SAAS,EAAE,CAAC,oBAAoB,CAAC;qBAClC;oBACD,QAAQ,EAAE;wBACR,SAAS,EAAE,CAAC,UAAU,CAAC;qBACxB;iBACF;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,SAAS,EAAE,UAAU;aACtB;SACF,CAAC,CAAC;KAsDJ;IA1JC,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;KAChD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC/B;KACF;;;;;IAOD,MAAM,QAAQ;;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,KAAK;YACxB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;SACvB,CAAC,CAAC;KACJ;;;;;IAOD,MAAM,YAAY;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;KAC9B;IAYD,iBAAiB,CAAC,QAAgB;QAChC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KAC7B;IAGD,iBAAiB,CAAC,KAAkB;QAClC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA6B,CAAC;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;QACvD,MAAM,CAAC,OAAO,CAAC,CAAC;YACd,IAAI,CAAC,KAAK,KAAK,EAAE;gBACf,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;aACnB;SACF,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;YAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;KACJ;IAEO,YAAY,CAAC,KAAa;QAChC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;YACvB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC;SACvC,CAAC,CAAC;KACJ;IAqCD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC;YAC/C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CAAC;QACH,QACE,4DAAK,KAAK,EAAE,IAAI,EAAE,IACf,IAAI,CAAC,KAAK,KACT,8DACE,KAAK,EAAE,UAAU,CACf,yBAAyB,EACzB;gBACE,kBAAkB,EAAE,CAAC,IAAI,CAAC,QAAQ;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD;gBACE,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACrC,CACF,IAED,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACrC,IAAI,CAAC,QAAQ,IAAI,mEAAc,CAC1B,CACT,EACD,4DAAK,KAAK,EAAE,SAAS,EAAE,IACrB,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EAEL,IAAI,CAAC,WAAW,KACf,4DACE,KAAK,EAAE,UAAU,CACf,sCAAsC,EACtC;gBACE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACpD,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK;gBAChE,qCAAqC,EAAE,IAAI,CAAC,QAAQ;aACrD,EACD;gBACE,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACrC,CACF,IAEA,IAAI,CAAC,WAAW,CACb,CACP,CACG,EACN;KACH;;;;;;;;;;","names":[],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"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"],"version":3}

package/dist/esm/bcm-radio.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 
 const radioCss = ".block{display:block}:host{display:block}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\\[18px\\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-radio-bg\\]{background-color:var(--bcm-radio-bg)}.bg-\\[--bcm-radio-checked\\]{background-color:var(--bcm-radio-checked)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-radio-text-color\\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\\[inset_0_0_0_3px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:hover .group-hover\\:shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border-hover\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const BcmRadioStyle0 = radioCss;
@@ -46,7 +46,7 @@ const BcmRadio = class {
          * @defaultValue false
          */
         this.error = false;
-        this.getRadioClass = ce({
+        this.getRadioClass = tv({
             slots: {
                 container: 'bcm-ui-element bcm-radio group',
                 dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',
@@ -158,7 +158,7 @@ const BcmRadio = class {
             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))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/bcm-radio.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-radio.entry.js","mappings":"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","names":["tv"],"sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\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"],"version":3}
+{"file":"bcm-radio.entry.js","mappings":"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","names":[],"sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\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"],"version":3}

package/dist/esm/bcm-segmented-picker-option.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 
 const segmentedPickerOptionCss = ".relative{position:relative}.flex{display:flex}.outline{outline-style:solid}:host{display:inline-block;flex:1}.segmented-option{background:transparent;height:100%;outline:none;position:relative;width:100%;z-index:1}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\\[1px\\]{padding-bottom:1px;padding-top:1px}.py-\\[3px\\]{padding-bottom:3px;padding-top:3px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-\\[--bcm-ui-color-text-header\\]{color:var(--bcm-ui-color-text-header)}.text-\\[--bcm-ui-color-text-helper\\]{color:var(--bcm-ui-color-text-helper)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const BcmSegmentedPickerOptionStyle0 = segmentedPickerOptionCss;
@@ -18,7 +18,7 @@ const BcmSegmentedPickerOption = class {
                 return;
             this.bcmOptionClick.emit(this.value);
         };
-        this.optionClass = ce({
+        this.optionClass = tv({
             base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',
             variants: {
                 size: {
@@ -90,11 +90,11 @@ const BcmSegmentedPickerOption = class {
     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))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/bcm-segmented-picker-option.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-segmented-picker-option.entry.js","mappings":"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","names":["tv"],"sources":["src/components/segmented-picker/segmented-picker-option.css?tag=bcm-segmented-picker-option&encapsulation=shadow","src/components/segmented-picker/segmented-picker-option.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  flex: 1;\n}\n\n.segmented-option {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  position: relative;\n  z-index: 1;\n  outline: none;\n}\n","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"],"version":3}
+{"file":"bcm-segmented-picker-option.entry.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,i9CAAi9C,CAAC;AACn/C,uCAAe,wBAAwB;;MCQ1B,wBAAwB;IALrC;;;;QAsBE,aAAQ,GAAG,KAAK,CAAC;;QAIjB,aAAQ,GAAG,KAAK,CAAC;QAWT,cAAS,GAAuB,IAAI,CAAC;QA6CrC,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,UAAU,EAAE;gBAAE,OAAO;YAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC,CAAC;QAQM,gBAAW,GAAG,EAAE,CACtB;YACE,IAAI,EAAE,yHAAyH;YAC/H,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,2BAA2B;oBAClC,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,2BAA2B;iBACnC;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,mCAAmC;oBACzC,KAAK,EAAE,mCAAmC;iBAC3C;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,+BAA+B;oBACrC,KAAK,EAAE,EAAE;iBACV;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAuBH;IAxGC,iBAAiB;;QAEf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;;QAG3D,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;SACrE;KACF;IAED,gBAAgB;;;QAGd,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,CAAC;SACvC;KACF;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,mBAAmB,GAAG,IAAI,gBAAgB,CAAC;gBAC9C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;aACxC,CAAC,CAAC;YACH,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SACpG;KACF;IAEO,eAAe;;QACrB,OAAO,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,OAAO,CAAC,MAAK,IAAI,CAAC,KAAK,CAAC;KAC7D;IAEO,iBAAiB;;QACvB,OAAO,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,MAAM,CAAyB,KAAI,QAAQ,CAAC;KAClF;IAEO,UAAU;;QAChB,OAAO,IAAI,CAAC,QAAQ,KAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,CAAC,UAAU,CAAC,CAAA,IAAI,KAAK,CAAC;KAC3E;IAQD,MAAM,QAAQ;;QACZ,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACzE,OAAO,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,CAAC;KACpD;IA+BD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEnC,QACE,EAAC,IAAI,uDACH,+DACE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;gBACtB,IAAI;gBACJ,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ;aACT,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,IAEb,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,CACJ,EACP;KACH;;;;;;;","names":[],"sources":["src/components/segmented-picker/segmented-picker-option.css?tag=bcm-segmented-picker-option&encapsulation=shadow","src/components/segmented-picker/segmented-picker-option.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  flex: 1;\n}\n\n.segmented-option {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  position: relative;\n  z-index: 1;\n  outline: none;\n}\n","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"],"version":3}

package/dist/esm/bcm-segmented-picker.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 
 const segmentedPickerCss = ".relative{position:relative}.flex{display:flex}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{display:inline-block;position:relative}:host([full-width]){width:100%}.segmented-container{border-radius:var(--bcm-ui-border-radius,4px)}.segmented-indicator{border-radius:var(--bcm-ui-border-radius-md,2px);height:100%;top:0;transition:left .2s ease-in-out,width .2s ease-in-out}.segmented-options{display:flex}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.z-0{z-index:0}.z-10{z-index:10}.inline-flex{display:inline-flex}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-\\[--bcm-ui-color-background-default-default\\]{background-color:var(--bcm-ui-color-background-default-default)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";
 const BcmSegmentedPickerStyle0 = segmentedPickerCss;
@@ -20,7 +20,7 @@ const BcmSegmentedPicker = class {
             width: '0',
             transition: 'none',
         };
-        this.segmentedClass = ce({
+        this.segmentedClass = tv({
             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',
             variants: {
                 size: {
@@ -124,11 +124,11 @@ const BcmSegmentedPicker = class {
         }, 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' })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bcm-segmented-picker.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-segmented-picker.entry.js","mappings":"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","names":["tv"],"sources":["src/components/segmented-picker/segmented-picker.css?tag=bcm-segmented-picker&encapsulation=shadow","src/components/segmented-picker/segmented-picker.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n.segmented-container {\n  border-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n.segmented-indicator {\n  height: 100%;\n  top: 0;\n  border-radius: var(--bcm-ui-border-radius-md, 2px);\n  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;\n}\n\n.segmented-options {\n  display: flex;\n}\n","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"],"version":3}
+{"file":"bcm-segmented-picker.entry.js","mappings":"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","names":[],"sources":["src/components/segmented-picker/segmented-picker.css?tag=bcm-segmented-picker&encapsulation=shadow","src/components/segmented-picker/segmented-picker.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n.segmented-container {\n  border-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n.segmented-indicator {\n  height: 100%;\n  top: 0;\n  border-radius: var(--bcm-ui-border-radius-md, 2px);\n  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;\n}\n\n.segmented-options {\n  display: flex;\n}\n","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"],"version":3}

package/dist/esm/bcm-switch.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-18b75a47.js';
 import { g as generateId } from './generate-id-3b2fcb93.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 
 const switchCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";
 const BcmSwitchStyle0 = switchCss;
@@ -50,7 +50,7 @@ const BcmSwitch = class {
             };
             return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultStyle), (this.checked && checkedStyle)), (this.error && errorStyle)), (this.readonly && readonlyStyle)), (this.disabled && disabledStyle));
         };
-        this.switchClass = ce({
+        this.switchClass = tv({
             slots: {
                 base: 'bcm-ui-element flex flex-col',
                 switchWrapper: 'flex items-center group',
@@ -168,12 +168,12 @@ const BcmSwitch = class {
         });
         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" })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bcm-switch.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-switch.entry.js","mappings":"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","names":["tv"],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","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"],"version":3}
+{"file":"bcm-switch.entry.js","mappings":"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","names":[],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","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"],"version":3}

package/dist/esm/bcm-tabs-list.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 
 const tabsListCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.h-0\\.5{height:.125rem}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\\[--bcm-ui-color-text-primary\\]{background-color:var(--bcm-ui-color-text-primary)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";
 const BcmTabsListStyle0 = tabsListCss;
@@ -10,7 +10,7 @@ const BcmTabsList = class {
         /**
          * Tailwind variants configuration for styling the tabs list container and inkbar
          */
-        this.class = ce({
+        this.class = tv({
             slots: {
                 /**
                  * Main container that holds both the tablist and inkbar
@@ -29,7 +29,7 @@ const BcmTabsList = class {
     }
     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' }))));
     }
 };
 BcmTabsList.style = BcmTabsListStyle0;

package/dist/esm/bcm-tabs-list.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-tabs-list.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ipCAAipC,CAAC;AACtqC,0BAAe,WAAW;;MCWb,WAAW;IALxB;;;;;QASY,UAAK,GAAGA,EAAE,CAAC;YACf,KAAK,EAAE;;;;gBAIH,SAAS,EAAE,4CAA4C;;;;gBAKvD,MAAM,EAAE,uIAAuI;;;;gBAK/I,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,QACI,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW,IACrC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ,EAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,IACjC,8DAAa,CACX,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/tabs/tabs-list.css?tag=bcm-tabs-list&encapsulation=shadow","src/components/tabs/tabs-list.component.tsx"],"sourcesContent":["/* tabs-list.css */\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n","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}"],"version":3}
+{"file":"bcm-tabs-list.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ipCAAipC,CAAC;AACtqC,0BAAe,WAAW;;MCWb,WAAW;IALxB;;;;;QASU,UAAK,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;;;;gBAIL,SAAS,EAAE,4CAA4C;;;;gBAKvD,MAAM,EAAE,uIAAuI;;;;gBAK/I,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,QACE,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW,IACvC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ,EAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,IACnC,8DAAa,CACT,CACF,EACN;KACH;;;;;;","names":[],"sources":["src/components/tabs/tabs-list.css?tag=bcm-tabs-list&encapsulation=shadow","src/components/tabs/tabs-list.component.tsx"],"sourcesContent":["/* tabs-list.css */\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n","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"],"version":3}

package/dist/esm/bcm-tabs-trigger.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 
 const tabsTriggerCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-default\\]{background-color:var(--bcm-ui-color-text-default)}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
 const BcmTabsTriggerStyle0 = tabsTriggerCss;
@@ -23,7 +23,7 @@ const BcmTabsTrigger = class {
         /**
          * Tailwind variants configuration for styling
          */
-        this.class = ce({
+        this.class = tv({
             slots: {
                 tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',
                 borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',
@@ -77,7 +77,7 @@ const BcmTabsTrigger = class {
             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() })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bcm-tabs-trigger.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-tabs-trigger.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,g9DAAg9D,CAAC;AACx+D,6BAAe,cAAc;;MCWhB,cAAc;IAL3B;;;;;;QAqBE,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAGA,EAAE,CAChB;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,gFAAgF;aAC7F;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACpC;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,GAAG,EAAE,oBAAoB;qBAC1B;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oBAAoB;qBAC1B;iBACF;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE;wBACJ,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAChD;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBAC/C;iBACF;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAiBH;;;;;IAjES,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;IA+CD,MAAM;QACJ,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAClF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACzF,8DAAQ,CACD,EACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC3B,EACP;KACH;;;;;;;","names":["tv"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n  tag: 'bcm-tabs-trigger',\n  styleUrl: 'tabs-trigger.css',\n  shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n  /**\n   * Reference to the host element\n   */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier value for the tab\n   */\n  @Prop({ reflect: true })\n  value: string;\n\n  /**\n   * Whether the tab is currently active\n   */\n  @Prop({ reflect: true })\n  active: boolean = false;\n\n  /**\n   * Size of the tab\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Event emitted when this tab is selected\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabSelected',\n  })\n  bcmTabSelected: EventEmitter<string>;\n\n  /**\n   * Handles click events on the tab\n   * Emits bcmTabSelected event with tab value if not disabled\n   */\n  private handleClick() {\n    if (this.disabled) return;\n    this.bcmTabSelected.emit(this.value);\n  }\n\n  /**\n   * Tailwind variants configuration for styling\n   */\n  private class = tv(\n    {\n      slots: {\n        tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n        borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',\n      },\n      variants: {\n        size: {\n          small: { tab: 'text-size-4 gap-2' },\n          medium: { tab: 'text-size-5 gap-2.5' },\n          large: { tab: 'text-size-6 gap-3' },\n        },\n        active: {\n          true: {\n            tab: 'text-color-primary',\n          },\n          false: {\n            tab: 'text-color-default',\n          },\n        },\n        disabled: {\n          true: {\n            tab: 'cursor-not-allowed text-color-disabled',\n            borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n          },\n          false: {\n            tab: 'cursor-pointer text-color hover:text-color-primary',\n            borderLine: 'bg-[--bcm-ui-color-text-default]',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        active: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { tab, borderLine } = this.class({\n      size: this.size,\n      active: this.active,\n      disabled: this.disabled,\n    });\n    return (\n      <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n        <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n          <slot />\n        </button>\n        <div class={borderLine()}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-tabs-trigger.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,g9DAAg9D,CAAC;AACx+D,6BAAe,cAAc;;MCWhB,cAAc;IAL3B;;;;;;QAqBE,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAG,EAAE,CAChB;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,gFAAgF;aAC7F;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACpC;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,GAAG,EAAE,oBAAoB;qBAC1B;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oBAAoB;qBAC1B;iBACF;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE;wBACJ,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAChD;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBAC/C;iBACF;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAiBH;;;;;IAjES,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;IA+CD,MAAM;QACJ,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAClF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACzF,8DAAQ,CACD,EACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC3B,EACP;KACH;;;;;;;","names":[],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n  tag: 'bcm-tabs-trigger',\n  styleUrl: 'tabs-trigger.css',\n  shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n  /**\n   * Reference to the host element\n   */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier value for the tab\n   */\n  @Prop({ reflect: true })\n  value: string;\n\n  /**\n   * Whether the tab is currently active\n   */\n  @Prop({ reflect: true })\n  active: boolean = false;\n\n  /**\n   * Size of the tab\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Event emitted when this tab is selected\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabSelected',\n  })\n  bcmTabSelected: EventEmitter<string>;\n\n  /**\n   * Handles click events on the tab\n   * Emits bcmTabSelected event with tab value if not disabled\n   */\n  private handleClick() {\n    if (this.disabled) return;\n    this.bcmTabSelected.emit(this.value);\n  }\n\n  /**\n   * Tailwind variants configuration for styling\n   */\n  private class = tv(\n    {\n      slots: {\n        tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n        borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',\n      },\n      variants: {\n        size: {\n          small: { tab: 'text-size-4 gap-2' },\n          medium: { tab: 'text-size-5 gap-2.5' },\n          large: { tab: 'text-size-6 gap-3' },\n        },\n        active: {\n          true: {\n            tab: 'text-color-primary',\n          },\n          false: {\n            tab: 'text-color-default',\n          },\n        },\n        disabled: {\n          true: {\n            tab: 'cursor-not-allowed text-color-disabled',\n            borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n          },\n          false: {\n            tab: 'cursor-pointer text-color hover:text-color-primary',\n            borderLine: 'bg-[--bcm-ui-color-text-default]',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        active: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { tab, borderLine } = this.class({\n      size: this.size,\n      active: this.active,\n      disabled: this.disabled,\n    });\n    return (\n      <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n        <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n          <slot />\n        </button>\n        <div class={borderLine()}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/bcm-tabs.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 
 const bcmTabsCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.contents{display:contents}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const BcmTabsStyle0 = bcmTabsCss;
@@ -17,7 +17,7 @@ const BcmTabs = class {
         /**
          * Tab container class
          */
-        this.tabClass = ce({
+        this.tabClass = tv({
             base: 'tabs-container bcm-ui-element flex flex-col w-full',
         });
     }
@@ -193,7 +193,7 @@ const BcmTabs = class {
         }
     }
     render() {
-        return (h(Host, { key: '0afd825b3df8017a0a5bc88a341430fec848d7ad' }, h("div", { key: 'e0ee72418f290849a68e4286ee91b3abceb668f3', class: this.tabClass() }, h("slot", { key: 'e9e032f474872ef1fe32a23b3feb0e75303f9c12', name: "tabs-list" }), h("slot", { key: 'cc22e3ac81914ecd88016a7033c135c52a99deed' }))));
+        return (h(Host, { key: '2bc33f644ca746b98c5be1b630471f2d2812a4e3' }, h("div", { key: '29c8e9bb573d2944cf2ece084036c6a5582fe6ca', class: this.tabClass() }, h("slot", { key: '2c302a219cadc0141dbd00cd489676796a684125', name: "tabs-list" }), h("slot", { key: '66f0612d4294eea35f19eee59742db7c9e973a58' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {