@heymantle/litho 0.0.1

package/dist/cjs/components/Text.js

@@ -0,0 +1,274 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Text block",
+    variants: {
+        alignment: {
+            left: "text-left",
+            center: "text-center",
+            right: "text-right",
+            end: "text-right",
+            start: "text-left"
+        },
+        fontWeight: {
+            normal: "font-normal",
+            regular: "font-normal",
+            medium: "font-medium",
+            semibold: "font-semibold",
+            bold: "font-bold"
+        },
+        color: {
+            default: "text-highest",
+            subdued: "text-high",
+            normal: "text-normal",
+            critical: "text-fg-critical",
+            success: "text-fg-success",
+            warning: "text-fg-caution",
+            alternate: "text-alternate",
+            link: "text-link",
+            low: "text-low",
+            lower: "text-lower",
+            lowest: "text-lowest",
+            disabled: "text-lowest",
+            "success-fg": "text-success-fg",
+            "critical-fg": "text-critical-fg",
+            "warning-fg": "text-warning-fg",
+            "attention-fg": "text-attention-fg",
+            "info-fg": "text-info-fg",
+            "highlight-fg": "text-highlight-fg",
+            "insight-fg": "text-insight-fg",
+            "neutral-fg": "text-neutral-fg",
+            "success-alt-fg": "text-success-alt-fg",
+            "critical-alt-fg": "text-critical-alt-fg",
+            "warning-alt-fg": "text-warning-alt-fg",
+            "attention-alt-fg": "text-attention-alt-fg",
+            "info-alt-fg": "text-info-alt-fg",
+            "highlight-alt-fg": "text-highlight-alt-fg",
+            "insight-alt-fg": "text-insight-alt-fg",
+            "neutral-alt-fg": "text-neutral-alt-fg",
+            "btn-secondary-fg": "text-btn-secondary-fg",
+            "tab-active-fg": "text-tab-active-fg",
+            "tab-active-fg-low": "text-tab-active-fg-low",
+            "FrameSaveBar": "text-alternate dark:text-black"
+        },
+        truncate: {
+            true: "truncate",
+            false: ""
+        },
+        clampLines: {
+            1: "line-clamp-1",
+            2: "line-clamp-2",
+            3: "line-clamp-3",
+            4: "line-clamp-4",
+            5: "line-clamp-5",
+            false: ""
+        },
+        variant: {
+            heading4xl: "font-semibold text-4xl leading-10",
+            heading2xl: "font-semibold text-2xl leading-8",
+            headingXl: "font-semibold text-xl leading-7",
+            headingLg: "font-semibold text-lg leading-6",
+            headingMd: "font-semibold text-md leading-6",
+            headingSm: "font-semibold text-base leading-5",
+            headingXs: "font-semibold text-sm leading-4",
+            bodyXl: "text-lg leading-6",
+            bodyLg: "text-md leading-5",
+            bodyMd: "text-base leading-5",
+            bodySm: "text-sm leading-4",
+            bodyXs: "text-xs leading-4"
+        },
+        visuallyHidden: {
+            true: "sr-only",
+            false: ""
+        },
+        strike: {
+            true: "line-through",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        color: "default",
+        truncate: false,
+        variant: "bodyMd"
+    },
+    compoundVariants: [
+        {
+            variant: [
+                "headingXl",
+                "headingLg",
+                "headingMd",
+                "headingSm",
+                "headingXs"
+            ],
+            fontWeight: "normal",
+            class: "font-normal"
+        },
+        {
+            variant: [
+                "headingXl",
+                "headingLg",
+                "headingMd",
+                "headingSm",
+                "headingXs"
+            ],
+            fontWeight: "medium",
+            class: "font-medium"
+        },
+        {
+            variant: [
+                "headingXl",
+                "headingLg",
+                "headingMd",
+                "headingSm",
+                "headingXs"
+            ],
+            fontWeight: "semibold",
+            class: "font-semibold"
+        },
+        {
+            variant: [
+                "headingXl",
+                "headingLg",
+                "headingMd",
+                "headingSm",
+                "headingXs"
+            ],
+            fontWeight: "bold",
+            class: "font-bold"
+        }
+    ]
+});
+/**
+ * A text component that renders styled text based on provided props.
+ *
+ * @param {Object} props - Properties to customize the text component.
+ * @param {'left' | 'center' | 'right' | 'end' | 'start'} [props.alignment] - Text alignment.
+ * @param {'normal' | 'regular' | 'medium' | 'semibold' | 'bold'} [props.fontWeight] - Font weight.
+ * @param {'default' | 'subdued' | 'critical' | 'success' | 'warning' | 'alternate' | 'link' | 'disabled'} [props.color] - Text color variant.
+ * @param {boolean} [props.truncate] - Whether to truncate text with ellipsis.
+ * @param {'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs'} [props.variant] - Text size and style variant.
+ * @param {boolean} [props.visuallyHidden] - Visually hides text for accessibility.
+ * @param {string} [props.className] - Additional CSS class names.
+ * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
+ * @param {number} [props.clampLines] - Number of lines to clamp.
+ * @param {boolean} [props.strike] - Whether to strike through the text.
+ * @returns {JSX.Element} Rendered text component with applied styles.
+ */ function Text() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, rest = _object_without_properties(props, [
+        "alignment",
+        "as",
+        "className",
+        "color",
+        "fontWeight",
+        "truncate",
+        "variant",
+        "visuallyHidden",
+        "clampLines",
+        "strike"
+    ]);
+    var classes = styles({
+        alignment: alignment,
+        color: color,
+        fontWeight: fontWeight,
+        truncate: truncate,
+        variant: variant,
+        visuallyHidden: visuallyHidden,
+        clampLines: clampLines,
+        strike: strike
+    });
+    var Element = as || (visuallyHidden ? 'span' : 'p');
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, _object_spread_props(_object_spread({}, rest), {
+        className: "".concat(classes).concat(className ? " ".concat(className) : '')
+    }));
+}
+var _default = Text;