bromcom-ui-next 0.1.5 → 0.1.7

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

@@ -0,0 +1,253 @@
+import { h, Host } from "@stencil/core";
+import { tv } from "tailwind-variants";
+export class BcmSegmentedPickerOption {
+    constructor() {
+        /** Whether this option is selected */
+        this.selected = false;
+        /** Whether this option is disabled */
+        this.disabled = false;
+        this.parentRef = null;
+        this.handleClick = () => {
+            if (this.isDisabled())
+                return;
+            this.bcmOptionClick.emit(this.value);
+        };
+        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: {
+                    small: 'py-[1px] px-3 text-size-4',
+                    medium: 'py-[3px] px-3 text-size-5',
+                    large: 'py-[6px] px-3 text-size-6',
+                },
+                selected: {
+                    true: 'text-[--bcm-ui-color-text-header]',
+                    false: 'text-[--bcm-ui-color-text-helper]',
+                },
+                disabled: {
+                    true: 'cursor-not-allowed opacity-50',
+                    false: '',
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                selected: false,
+                disabled: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    componentWillLoad() {
+        // Parent referansını al
+        this.parentRef = this.host.closest('bcm-segmented-picker');
+        // İlk yüklemede selected durumu
+        if (this.parentRef) {
+            this.selected = this.parentRef.getAttribute('value') === this.value;
+        }
+    }
+    componentDidLoad() {
+        // DOM yüklendikten sonra sadece parent değer değişikliklerini gözlemeye başla
+        // Burada artık prop değişikliği yok
+        this.setupValueObserver();
+    }
+    disconnectedCallback() {
+        if (this.parentValueObserver) {
+            this.parentValueObserver.disconnect();
+        }
+    }
+    setupValueObserver() {
+        if (this.parentRef) {
+            this.parentValueObserver = new MutationObserver(() => {
+                this.selected = this.isValueSelected();
+            });
+            this.parentValueObserver.observe(this.parentRef, { attributes: true, attributeFilter: ['value'] });
+        }
+    }
+    isValueSelected() {
+        var _a;
+        return ((_a = this.parentRef) === null || _a === void 0 ? void 0 : _a.getAttribute('value')) === this.value;
+    }
+    getSizeFromParent() {
+        var _a;
+        return ((_a = this.parentRef) === null || _a === void 0 ? void 0 : _a.getAttribute('size')) || 'medium';
+    }
+    isDisabled() {
+        var _a;
+        return this.disabled || ((_a = this.parentRef) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled')) || false;
+    }
+    async getWidth() {
+        var _a;
+        const element = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.segmented-option');
+        return (element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width) || 0;
+    }
+    render() {
+        const size = this.size || this.getSizeFromParent();
+        const disabled = this.isDisabled();
+        return (h(Host, { key: '753ba2aeeb51583c312798ef3bc7dfa00203548d' }, h("button", { key: '403c1a1c2fb28894ae9b9c93f2b50b958bfe4657', class: this.optionClass({
+                size,
+                selected: this.selected,
+                disabled,
+            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: 'effebfd8ea1a412483c1f6789eec1d2736dc5e97' }, this.label))));
+    }
+    static get is() { return "bcm-segmented-picker-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["segmented-picker-option.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["segmented-picker-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Option value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Option display label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentedPickerSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "SegmentedPickerSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/segmented-picker/types.ts::SegmentedPickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the option size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this option is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this option is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmOptionClick",
+                "name": "bcmOptionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Click event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getWidth": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=segmented-picker-option.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-picker-option.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker-option.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SegmentedPickerSize } from './types';\nimport { tv } from '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"]}

package/dist/collection/components/segmented-picker/segmented-picker-option.css

@@ -0,0 +1 @@
+.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)}

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

@@ -0,0 +1,269 @@
+import { h, Host } from "@stencil/core";
+import { tv } from "tailwind-variants";
+export class BcmSegmentedPicker {
+    constructor() {
+        /** Controls the component size */
+        this.size = 'medium';
+        /** Disabled state */
+        this.disabled = false;
+        /** Full width component */
+        this.fullWidth = false;
+        this.options = [];
+        this.indicatorStyles = {
+            left: '0',
+            width: '0',
+            transition: 'none',
+        };
+        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: {
+                    small: 'text-size-4',
+                    medium: 'text-size-5',
+                    large: 'text-size-6',
+                },
+                fullWidth: {
+                    true: 'w-full',
+                },
+                disabled: {
+                    true: 'opacity-50 cursor-not-allowed',
+                    false: 'cursor-pointer',
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                fullWidth: false,
+                disabled: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    componentWillLoad() {
+        // İlk yüklemede options'ları belirle
+        this.parseOptions();
+        // Eğer value belirtilmemişse ve options varsa, ilk option'ı seç
+        if (!this.value && this.options.length > 0) {
+            this.value = this.options[0].value;
+        }
+    }
+    componentDidLoad() {
+        // DOM yüklendikten sonra sadece gösterge pozisyonunu güncelle
+        this.updateIndicatorPosition(false);
+    }
+    componentDidUpdate() {
+        this.updateIndicatorPosition();
+    }
+    valueChanged() {
+        this.updateIndicatorPosition();
+    }
+    handleOptionClick(event) {
+        if (this.disabled)
+            return;
+        const value = event.detail;
+        if (this.value !== value) {
+            this.value = value;
+            this.bcmChange.emit({ value });
+        }
+    }
+    parseOptions() {
+        const slotNodes = Array.from(this.host.children);
+        this.options = slotNodes
+            .filter(node => node.nodeName.toLowerCase() === 'bcm-segmented-picker-option')
+            .map(option => ({
+            value: option.getAttribute('value') || '',
+            label: option.getAttribute('label') || option.textContent || '',
+        }));
+    }
+    updateIndicatorPosition(animate = true) {
+        // Seçili option elemanını bul
+        const selectedOption = this.host.querySelector(`bcm-segmented-picker-option[value="${this.value}"]`);
+        if (!selectedOption)
+            return;
+        // Tüm option'ları seç
+        const allOptions = this.host.querySelectorAll('bcm-segmented-picker-option');
+        // Seçili option'ın indeksini bul
+        let selectedIndex = -1;
+        for (let i = 0; i < allOptions.length; i++) {
+            if (allOptions[i].getAttribute('value') === this.value) {
+                selectedIndex = i;
+                break;
+            }
+        }
+        if (selectedIndex === -1)
+            return;
+        // DOM manipülasyonu asenkron olarak yap
+        setTimeout(() => {
+            try {
+                // Seçili option'a kadar olan genişliği hesapla
+                let leftPosition = 0;
+                for (let i = 0; i < selectedIndex; i++) {
+                    const optionElement = allOptions[i];
+                    if (optionElement) {
+                        leftPosition += optionElement.offsetWidth;
+                    }
+                }
+                // Seçili option'ın genişliği
+                const selectedWidth = allOptions[selectedIndex].offsetWidth;
+                // İndikatör stillerini güncelle
+                this.indicatorStyles = {
+                    left: `${leftPosition}px`,
+                    width: `${selectedWidth}px`,
+                    transition: animate ? 'all 0.2s ease-in-out' : 'none',
+                };
+            }
+            catch (error) {
+                console.error('Error updating indicator position:', error);
+            }
+        }, 10);
+    }
+    render() {
+        return (h(Host, { key: 'c82527ac7d8fb0d1d66005eb82431b0f951cad97' }, h("div", { key: 'c32f4c59d6c843eef0d20a72d21304f3eeaebab6', class: this.segmentedClass({
+                size: this.size,
+                fullWidth: this.fullWidth,
+                disabled: this.disabled,
+            }) }, h("div", { key: 'b5c38f756af549436dabaadfb49aac8f30afad41', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '6a0f9c7d6d2dbc6a8b5ea43e19e2c9b902613812', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '2ae6718da8ddb236648e120ae769f21eb6434b31' })))));
+    }
+    static get is() { return "bcm-segmented-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["segmented-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["segmented-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentedPickerSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "SegmentedPickerSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/segmented-picker/types.ts::SegmentedPickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the component size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected option value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "options": {},
+            "indicatorStyles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmChange",
+                "name": "bcmChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Change event"
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bcmOptionClick",
+                "method": "handleOptionClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=segmented-picker.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-picker.component.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/segmented-picker.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen } from '@stencil/core';\nimport { tv } from '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"]}

package/dist/collection/components/segmented-picker/segmented-picker.css

@@ -0,0 +1 @@
+.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)}

package/dist/collection/components/segmented-picker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/segmented-picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/segmented-picker/types.ts"],"names":[],"mappings":"","sourcesContent":["export type SegmentedPickerSize = 'small' | 'medium' | 'large';\n"]}