@xlabs-store/core 0.0.1

package/dist/collection/components/x-typography/x-typography.js

@@ -0,0 +1,431 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Typography component that renders text variants and decorations.
+ */
+export class XTypography {
+    /**
+     * The type of typography.
+     * @example
+     * <x-typography type="title">Title</x-typography>
+     */
+    type = 'text';
+    /**
+     * Level of the title (1-5).
+     * @example
+     * <x-typography type="title" level={2}>H2</x-typography>
+     */
+    level = 1;
+    /**
+     * Disabled state.
+     * @example
+     * <x-typography disabled>Disabled text</x-typography>
+     */
+    disabled = false;
+    /**
+     * Mark text.
+     * @example
+     * <x-typography mark>Highlighted</x-typography>
+     */
+    mark = false;
+    /**
+     * Code style.
+     * @example
+     * <x-typography code>const a = 1;</x-typography>
+     */
+    code = false;
+    /**
+     * Keyboard style.
+     * @example
+     * <x-typography keyboard>Ctrl</x-typography>
+     */
+    keyboard = false;
+    /**
+     * Underline style.
+     * @example
+     * <x-typography underline>Underlined</x-typography>
+     */
+    underline = false;
+    /**
+     * Delete (strikethrough) style.
+     * @example
+     * <x-typography delete>Deleted</x-typography>
+     */
+    delete = false;
+    /**
+     * Strong (bold) style.
+     * @example
+     * <x-typography strong>Bold</x-typography>
+     */
+    strong = false;
+    /**
+     * Italic style.
+     * @example
+     * <x-typography italic>Italic</x-typography>
+     */
+    italic = false;
+    /**
+     * Href for link type.
+     * @example
+     * <x-typography type="link" href="https://example.com">Link</x-typography>
+     */
+    href;
+    /**
+     * Target for link type.
+     * @example
+     * <x-typography type="link" href="https://example.com" target="_blank">Open</x-typography>
+     */
+    target;
+    /**
+     * Render typography element and apply decoration wrappers.
+     *
+     * Flow:
+     * 1. Destructure props to access typography settings.
+     * 2. Determine the HTML tag based on the `type` prop (e.g., h1-h5 for title, div for paragraph, a for link).
+     * 3. Wrap the slot content with decoration tags (mark, code, kbd, u, del, strong, i) if corresponding props are true.
+     * 4. Apply CSS classes for styling and disabled state.
+     * 5. Render the final element with attributes.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const { type, level, disabled, mark, code, keyboard, underline, delete: del, strong, italic, href, target } = this;
+        // Base classes for typography element.
+        const classes = {
+            'x-typography': true,
+            [`x-typography-${type}`]: true,
+            'x-typography-disabled': disabled,
+        };
+        // Select tag based on typography type.
+        let Tag = 'span';
+        if (type === 'title') {
+            Tag = `h${level}`;
+        }
+        else if (type === 'paragraph') {
+            Tag = 'div';
+        }
+        else if (type === 'link' || href) {
+            Tag = 'a';
+        }
+        // Default content from slot and apply decoration wrappers.
+        let content = h("slot", { key: '05bce1a95e6eed612afbb8aa4d69b319bb9e1548' });
+        if (mark)
+            content = h("mark", { key: '138b85fd01b2b9e31bb0e5d76451d18da536652c' }, content);
+        if (code)
+            content = h("code", { key: 'c7084c61c1ee5cad8310f55f8de0521dae3e9697' }, content);
+        if (keyboard)
+            content = h("kbd", { key: '571019489e33ad4f777324af357124ba68f44888' }, content);
+        if (underline)
+            content = h("u", { key: '9088854ca72d97b1a5c61eedbcc788ca049de147' }, content);
+        if (del)
+            content = h("del", { key: '3336e3f668cf8fa266668c4f1c220e1473f403ea' }, content);
+        if (strong)
+            content = h("strong", { key: '028028a6c56ff57e8cc20f5ee98a45c6023d7103' }, content);
+        if (italic)
+            content = h("i", { key: '73f02f0cb0c196892a8d83270d5378a25ca16df3' }, content);
+        // Add link attributes only for link types.
+        const attrs = (type === 'link' || href) ? { href, target } : {};
+        return (h(Host, { key: 'be336a90f2f693bbbecff37fffb6e75f40f62a23' }, h(Tag, { key: 'a8e2f60c78077316df7cd3edb7394ec9b55f6b80', class: classes, ...attrs }, content)));
+    }
+    static get is() { return "x-typography"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-typography.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-typography.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TypographyType",
+                    "resolved": "\"link\" | \"paragraph\" | \"text\" | \"title\"",
+                    "references": {
+                        "TypographyType": {
+                            "location": "local",
+                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-typography/x-typography.tsx",
+                            "id": "src/components/x-typography/x-typography.tsx::TypographyType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography type=\"title\">Title</x-typography>"
+                        }],
+                    "text": "The type of typography."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "TypographyLevel",
+                    "resolved": "1 | 2 | 3 | 4 | 5",
+                    "references": {
+                        "TypographyLevel": {
+                            "location": "local",
+                            "path": "E:/projects/fintvn/labs/packages/core/src/components/x-typography/x-typography.tsx",
+                            "id": "src/components/x-typography/x-typography.tsx::TypographyLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography type=\"title\" level={2}>H2</x-typography>"
+                        }],
+                    "text": "Level of the title (1-5)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "1"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography disabled>Disabled text</x-typography>"
+                        }],
+                    "text": "Disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "mark": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography mark>Highlighted</x-typography>"
+                        }],
+                    "text": "Mark text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mark",
+                "defaultValue": "false"
+            },
+            "code": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography code>const a = 1;</x-typography>"
+                        }],
+                    "text": "Code style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "code",
+                "defaultValue": "false"
+            },
+            "keyboard": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography keyboard>Ctrl</x-typography>"
+                        }],
+                    "text": "Keyboard style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard",
+                "defaultValue": "false"
+            },
+            "underline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography underline>Underlined</x-typography>"
+                        }],
+                    "text": "Underline style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "underline",
+                "defaultValue": "false"
+            },
+            "delete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography delete>Deleted</x-typography>"
+                        }],
+                    "text": "Delete (strikethrough) style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delete",
+                "defaultValue": "false"
+            },
+            "strong": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography strong>Bold</x-typography>"
+                        }],
+                    "text": "Strong (bold) style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "strong",
+                "defaultValue": "false"
+            },
+            "italic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography italic>Italic</x-typography>"
+                        }],
+                    "text": "Italic style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "italic",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography type=\"link\" href=\"https://example.com\">Link</x-typography>"
+                        }],
+                    "text": "Href for link type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-typography type=\"link\" href=\"https://example.com\" target=\"_blank\">Open</x-typography>"
+                        }],
+                    "text": "Target for link type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            }
+        };
+    }
+}

package/dist/collection/components/x-upload/types.js

@@ -0,0 +1 @@
+export {};