@ayseaistudio/ui-components 3.11.9 → 3.12.1

package/dist/BarChart/BarChart.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import "./style.css";
+export type LegendColour = "primary" | "secondary" | "fourth";
+export type BarColour = "primary" | "secondary" | "tertiary" | "fourth";
+export interface LegendItem {
+    label: string;
+    colour: LegendColour;
+    barClassName: string;
+}
+export interface ChartSegment {
+    color: BarColour;
+    value: number;
+    label?: string;
+    description?: string;
+}
+export interface ChartColumn {
+    label: string;
+    segments: ChartSegment[];
+}
+export interface BaseBarChartProps {
+    legendItems: LegendItem[];
+    scaleValues?: string[];
+    data: ChartColumn[];
+    maxBarHeight?: number;
+    tooltipFormatter?: (columnLabel: string, segment: ChartSegment) => string;
+    valueLabelFormatter?: (value: number, segment: ChartSegment, columnLabel: string) => string;
+    showLegend?: boolean;
+    yTickCount?: number;
+}
+export interface BarChartProps extends BaseBarChartProps {
+    grouped?: boolean;
+}
+export declare const GroupedBarChart: (props: BaseBarChartProps) => React.JSX.Element;
+export declare const BarChart: ({ grouped, ...rest }: BarChartProps) => React.JSX.Element;

package/dist/BarChart/BarChart.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useLayoutEffect, useEffect } from "react";
+import { LineBarHorizontal } from "../LineBarHorizontal";
+import { LineBarVertical } from "../LineBarVertical";
+import { InfoTooltip } from "../InfoTooltip";
+import { Label } from "../Label";
+import "./style.css";
+const DEFAULT_MAX_BAR_HEIGHT = 160;
+const DEFAULT_TOOLTIP_FORMATTER = (columnLabel, segment) => {
+    const segmentLabel = segment.label || "Segment";
+    return `${columnLabel} - ${segmentLabel}: ${segment.value.toLocaleString("tr-TR")}`;
+};
+const niceCeilStep = (x) => {
+    if (!Number.isFinite(x) || x <= 0)
+        return 1;
+    const exp = Math.floor(Math.log10(x));
+    const f = x / Math.pow(10, exp);
+    let nf = 1;
+    if (f <= 1)
+        nf = 1;
+    else if (f <= 2)
+        nf = 2;
+    else if (f <= 2.5)
+        nf = 2.5;
+    else if (f <= 3)
+        nf = 3;
+    else if (f <= 4)
+        nf = 4;
+    else if (f <= 5)
+        nf = 5;
+    else if (f <= 6)
+        nf = 6;
+    else if (f <= 8)
+        nf = 8;
+    else
+        nf = 10;
+    return nf * Math.pow(10, exp);
+};
+const buildScaleValues = (max, tickCount) => {
+    const t = Math.max(2, tickCount);
+    const rawStep = max / (t - 1);
+    const step = niceCeilStep(rawStep);
+    const niceMax = step * (t - 1);
+    const fractionDigits = step >= 1 ? 0 : step >= 0.1 ? 1 : 2;
+    // üstten alta gelsin (UI böyle)
+    return Array.from({ length: t }, (_, i) => {
+        const v = Number((niceMax - i * step).toFixed(fractionDigits));
+        return v.toLocaleString("tr-TR", {
+            minimumFractionDigits: fractionDigits,
+            maximumFractionDigits: fractionDigits,
+        });
+    });
+};
+const BaseBarChart = ({ legendItems, scaleValues, data, maxBarHeight, tooltipFormatter = DEFAULT_TOOLTIP_FORMATTER, valueLabelFormatter, showLegend = true, yTickCount = 5, layout, }) => {
+    const grouped = layout === "grouped";
+    const cardRef = useRef(null);
+    const plotRef = useRef(null);
+    const barsRef = useRef(null);
+    const scrollRef = useRef(null);
+    const [hoveredSegment, setHoveredSegment] = useState(null);
+    const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+    const [isVisible, setIsVisible] = useState(false);
+    const [plotHeight, setPlotHeight] = useState(DEFAULT_MAX_BAR_HEIGHT);
+    const dataAnimationKey = useMemo(() => data
+        .map((column) => `${column.label}:${column.segments
+        .map((segment) => `${segment.label ?? ""}=${Number(segment.value) || 0}`)
+        .join(",")}`)
+        .join("|"), [data]);
+    useLayoutEffect(() => {
+        const el = barsRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            const h = el.clientHeight;
+            if (h > 0) {
+                setPlotHeight(h);
+            }
+        };
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    useLayoutEffect(() => {
+        const sc = scrollRef.current;
+        const root = cardRef.current; // .bar-chart
+        if (!sc || !root)
+            return;
+        const update = () => {
+            // horizontal scrollbar yüksekliği (varsa)
+            const sbh = Math.max(0, sc.offsetHeight - sc.clientHeight);
+            root.style.setProperty("--x-scrollbar-h", `${sbh}px`);
+        };
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(sc);
+        // bazı browserlarda scrollbar görünürlüğü "layout"tan sonra netleşir
+        const raf = requestAnimationFrame(update);
+        return () => {
+            ro.disconnect();
+            cancelAnimationFrame(raf);
+        };
+    }, [data.length, grouped]);
+    const effectiveMaxBarHeight = useMemo(() => {
+        const desired = maxBarHeight ?? plotHeight; // maxBarHeight verilmişse onu iste
+        return Math.max(1, Math.min(desired, plotHeight)); // ama asla plotHeight'i aşmasın
+    }, [maxBarHeight, plotHeight]);
+    const yAxisTopOffset = useMemo(() => Math.max(0, plotHeight - effectiveMaxBarHeight), [plotHeight, effectiveMaxBarHeight]);
+    useEffect(() => {
+        cardRef.current?.style.setProperty("--plot-h", `${effectiveMaxBarHeight}px`);
+    }, [effectiveMaxBarHeight]);
+    useEffect(() => {
+        const el = plotRef.current;
+        if (!el)
+            return;
+        const reduceMotion = typeof window !== "undefined" &&
+            window.matchMedia &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (reduceMotion) {
+            setIsVisible(true);
+            return;
+        }
+        setIsVisible(false);
+        let io = null;
+        let raf = null;
+        raf = requestAnimationFrame(() => {
+            const root = el.closest(".frame-dashboard");
+            io = new IntersectionObserver(([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true);
+                    if (io)
+                        io.disconnect();
+                }
+            }, {
+                root,
+                threshold: 0.05,
+                rootMargin: "80px",
+            });
+            io.observe(el);
+            const r = el.getBoundingClientRect();
+            if (r.top < window.innerHeight && r.bottom > 0) {
+                setIsVisible(true);
+                if (io)
+                    io.disconnect();
+            }
+        });
+        return () => {
+            if (raf !== null)
+                cancelAnimationFrame(raf);
+            if (io)
+                io.disconnect();
+        };
+    }, [dataAnimationKey, grouped]);
+    const dataMax = useMemo(() => {
+        const allValues = data.flatMap((c) => c.segments.map((s) => s.value));
+        return allValues.length > 0 ? Math.max(...allValues) : 1;
+    }, [data]);
+    const computedScaleValues = useMemo(() => {
+        if (scaleValues?.length)
+            return scaleValues;
+        return buildScaleValues(dataMax, yTickCount);
+    }, [scaleValues, dataMax, yTickCount]);
+    const maxValue = useMemo(() => {
+        const top = computedScaleValues?.[0] ?? "";
+        // tr-TR sayı formatını (1.234,5) parse et.
+        const topN = Number(top.replace(/\./g, "").replace(",", ".").replace(/\s/g, ""));
+        const scaleMax = Number.isFinite(topN) && topN > 0 ? topN : 0;
+        const resolvedMax = Math.max(dataMax, scaleMax);
+        return resolvedMax > 0 ? resolvedMax : 1;
+    }, [computedScaleValues, dataMax]);
+    const getSegmentHeight = (value) => {
+        if (!maxValue)
+            return "0px";
+        const normalizedHeight = (value / maxValue) * effectiveMaxBarHeight;
+        const clamped = Math.min(effectiveMaxBarHeight, Math.max(0, normalizedHeight));
+        return `${clamped}px`;
+    };
+    const defaultValueLabelText = (value) => {
+        const rawValue = Number(value) || 0;
+        const isInt = Math.abs(rawValue - Math.round(rawValue)) < 1e-9;
+        return rawValue.toLocaleString("tr-TR", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: isInt ? 0 : 2,
+        });
+    };
+    const tooltipText = hoveredSegment
+        ? tooltipFormatter(hoveredSegment.columnLabel, hoveredSegment.segment)
+        : "";
+    const updateTooltipPosition = (event) => {
+        setTooltipPos({
+            x: event.clientX,
+            y: event.clientY,
+        });
+    };
+    const handleBarHover = (columnLabel, segment, event) => {
+        setHoveredSegment({ columnLabel, segment });
+        if (event) {
+            updateTooltipPosition(event);
+        }
+    };
+    const handleBarLeave = () => {
+        setHoveredSegment(null);
+    };
+    return (_jsxs("div", { className: "bar-chart", ref: cardRef, children: [hoveredSegment && tooltipText && (_jsx("div", { className: "alma-tooltip alma-tooltip-visible", style: { left: tooltipPos.x, top: tooltipPos.y }, children: _jsx(InfoTooltip, { text: tooltipText, withIcon: true, className: "alma-tooltip-content" }) })), showLegend && (_jsx("div", { className: "bar-chart-header", children: _jsx("div", { className: "frame-2", children: legendItems.map(({ label, colour, barClassName }) => (_jsx(LineBarVertical, { className: barClassName, colour: colour, label: label }, label))) }) })), _jsx("div", { className: "bar-chart-body", children: _jsxs("div", { className: `chart-area ${isVisible ? "is-visible" : ""}`, ref: plotRef, children: [_jsx("div", { className: "y-axis", style: {
+                                height: `${effectiveMaxBarHeight}px`,
+                                marginTop: `${yAxisTopOffset}px`,
+                            }, children: computedScaleValues.map((value, index) => {
+                                const count = computedScaleValues.length;
+                                const ratio = count <= 1 ? 0 : index / (count - 1);
+                                const isFirst = index === 0;
+                                const isLast = index === count - 1;
+                                const translateY = isFirst ? "0%" : isLast ? "-100%" : "-50%";
+                                return (_jsx("div", { className: "y-axis-tick", style: { top: `${ratio * 100}%`, transform: `translateY(${translateY})` }, children: _jsx(Label, { bold: "on", className: "label-3", color: "black", divClassName: "label-4", size: "small", spacing: "off", stroke: "off", text: value, version: "secondary" }) }, `${value}-${index}`));
+                            }) }), _jsx("div", { className: "plot-scroll", ref: scrollRef, style: {
+                                ["--cols"]: data.length,
+                                ["--colMin"]: grouped ? "84px" : "56px",
+                            }, children: _jsxs("div", { className: "plot-inner", children: [_jsx("div", { className: "bars-area", ref: barsRef, children: _jsx("div", { className: "attendance", children: data.length > 0 ? (data.map((column) => (_jsx("div", { className: `frame-6 ${grouped ? "frame-6-grouped" : ""}`, style: grouped
+                                                    ? { ["--segments"]: column.segments.length }
+                                                    : undefined, children: column.segments.length > 0 ? (column.segments.map((segment, index) => {
+                                                    const key = `${column.label}-${segment.label ?? index}`;
+                                                    const animatedKey = `${dataAnimationKey}-${key}`;
+                                                    const heightStr = getSegmentHeight(segment.value);
+                                                    const currentHeight = parseFloat(heightStr) || 0;
+                                                    const rawValue = Number(segment.value) || 0;
+                                                    const valueText = valueLabelFormatter
+                                                        ? valueLabelFormatter(rawValue, segment, column.label)
+                                                        : defaultValueLabelText(rawValue);
+                                                    // 0 (veya 0'a çok yakın) değerleri yazdırma
+                                                    const hasValue = rawValue > 0 && Boolean(valueText);
+                                                    // Bar çok kısa olduğunda etiketi üstte göster.
+                                                    const shouldPlaceLabelOutside = currentHeight < 26;
+                                                    const animationDelayMs = Math.min(260, index * 35);
+                                                    const motionStyle = {
+                                                        transformOrigin: "bottom",
+                                                        animation: `bar-rise-in 560ms cubic-bezier(0.16, 1, 0.3, 1) ${animationDelayMs}ms both`,
+                                                    };
+                                                    return (_jsxs("div", { style: {
+                                                            width: "100%",
+                                                            position: "relative",
+                                                            display: "flex",
+                                                            alignItems: "flex-end",
+                                                            justifyContent: "center",
+                                                            ["--bar-h"]: heightStr,
+                                                            ...motionStyle,
+                                                        }, children: [hasValue && (_jsx("span", { className: `bar-value-label ${shouldPlaceLabelOutside ? "outside" : "inside"}`, title: valueText, children: valueText })), _jsx(LineBarHorizontal, { className: "chart-bar", color: segment.color, label: false, version: "primary", style: {
+                                                                    height: heightStr,
+                                                                    width: "100%",
+                                                                    transition: "height 380ms ease",
+                                                                }, onMouseEnter: (event) => handleBarHover(column.label, segment, event), onMouseLeave: handleBarLeave })] }, animatedKey));
+                                                })) : (_jsx("div", { style: { width: "100%", height: "2px" } })) }, column.label)))) : (_jsx("div", { style: { width: "100%", textAlign: "center", padding: "20px", color: "#999" }, children: "No data available" })) }) }), _jsx("div", { className: "x-axis", children: data.map((column) => (_jsx("div", { className: "x-axis-cell", children: _jsx(Label, { bold: "off", className: "label-5", color: "black", size: "small", spacing: "off", stroke: "off", text: column.label, version: "secondary" }) }, column.label))) })] }) })] }) })] }));
+};
+export const GroupedBarChart = (props) => {
+    return _jsx(BaseBarChart, { ...props, layout: "grouped" });
+};
+export const BarChart = ({ grouped = false, ...rest }) => {
+    return _jsx(BaseBarChart, { ...rest, layout: "grouped" });
+};

package/dist/BarChart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart, GroupedBarChart } from "./BarChart";
+export type { LegendColour, BarColour, LegendItem, ChartSegment, ChartColumn, BarChartProps, BaseBarChartProps, } from "./BarChart";

package/dist/BarChart/index.js

@@ -0,0 +1 @@
+export { BarChart, GroupedBarChart } from "./BarChart";

package/dist/BarChart/style.css

@@ -0,0 +1,317 @@
+.bar-chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  --x-scrollbar-h: 0px;
+  --x-axis-h: 32px;
+  --colGap: 24px;
+}
+
+.bar-chart-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.bar-chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bar-chart-header .frame-2 {
+  align-items: flex-start;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 12px;
+  padding: 0px 6px;
+  position: relative;
+}
+
+.bar-chart .line-bar-vertical-instance {
+  height: 8px !important;
+  width: 24px !important;
+}
+
+.bar-chart .line-bar-vertical-wrapper .design-component-instance-node {
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.bar-chart .line-bar-vertical-2 {
+  background-color: #466212 !important;
+  height: 8px !important;
+  width: 24px !important;
+}
+
+.bar-chart .chart-area {
+  flex: 1;
+  display: flex;
+  padding: 6px;
+  padding-top: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  align-items: stretch;
+  overflow-y: hidden;
+  opacity: 1;
+  transform: none;
+  clip-path: none;
+  transition: none;
+}
+
+.bar-chart .chart-area.is-visible {
+  opacity: 1;
+  transform: none;
+  clip-path: none;
+}
+
+.bar-chart .y-axis {
+  position: relative;
+  width: 48px;
+  flex-shrink: 0;
+  min-height: 0;
+  padding-bottom: 0;
+  box-sizing: border-box;
+  height: var(--plot-h, calc(100% - var(--x-axis-h) - var(--x-scrollbar-h)));
+  align-self: flex-start;
+}
+
+.bar-chart .y-axis-tick {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: flex;
+}
+
+.bar-chart .label-3 {
+  align-self: stretch !important;
+  display: flex !important;
+  flex: 0 0 auto !important;
+  flex-grow: 0 !important;
+  width: 100% !important;
+  height: auto !important;
+}
+
+.bar-chart .label-4 {
+  margin-top: unset !important;
+}
+
+/* SCROLL CONTAINER */
+.bar-chart .plot-scroll {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 0;
+  padding-right: 6px;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: #bfc3c9 #eceef1;
+}
+
+.bar-chart .plot-scroll::-webkit-scrollbar {
+  height: 8px;
+}
+
+.bar-chart .plot-scroll::-webkit-scrollbar-track {
+  background: #eceef1;
+  border-radius: 999px;
+}
+
+.bar-chart .plot-scroll::-webkit-scrollbar-thumb {
+  background: #bfc3c9;
+  border-radius: 999px;
+}
+
+.bar-chart .plot-scroll::-webkit-scrollbar-thumb:hover {
+  background: #aeb3ba;
+}
+
+/* İçerideki toplam genişlik = cols * minColWidth + gap'ler (scroll tetikler) */
+.bar-chart .plot-inner {
+  min-width: calc(
+    (var(--cols, 1) * var(--colMin, 72px)) +
+    ((var(--cols, 1) - 1) * var(--colGap, 24px))
+  );
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.bar-chart .bars-area {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* attendance artık grid ve kolonlar min genişlikten küçülmez */
+.bar-chart .attendance {
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 1), minmax(var(--colMin, 72px), 1fr));
+  column-gap: var(--colGap, 24px);
+  align-items: end;
+  width: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.bar-chart .frame-6 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+}
+
+/* grouped mod: bir kolonun içindeki segmentler eşit paylaşılsın */
+.bar-chart .frame-6-grouped {
+  display: grid;
+  grid-template-columns: repeat(var(--segments, 1), minmax(0, 1fr));
+  gap: 4px;
+  align-items: end;
+}
+
+.bar-chart .x-axis-cell {
+  min-width: 0;
+  display: flex;
+  align-items: flex-end;
+}
+
+/* chart-bar shrink edebilsin */
+.bar-chart .chart-bar {
+  align-items: flex-end !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  min-height: 2px;
+}
+
+.bar-chart .bar-value-label {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  font-size: var(--b2-bold-font-size);
+  font-weight: var(--b2-bold-font-weight);
+  line-height: var(--b2-bold-line-height);
+  color: rgba(93, 93, 93, 1);
+  font-family: var(--b2-bold-font-family);
+  font-style: var(--b2-bold-font-style);
+  white-space: nowrap;
+  pointer-events: none;
+  max-width: calc(100% - 6px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+}
+
+.bar-chart .bar-value-label.inside {
+  top: calc(100% - var(--bar-h, 0px) + 6px);
+}
+
+.bar-chart .bar-value-label.outside {
+  /* bar'ın tepesinin üstüne sabit boşluk bırak (küçük barlarda border'a yapışmasın) */
+  bottom: calc(100% + 2px);
+}
+
+@keyframes bar-rise-in {
+  0% {
+    opacity: 0;
+    transform: translateY(12px) scaleY(0.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+.bar-chart .alma-tooltip {
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  transform: translate(-50%, calc(-100% - 12px));
+  transition: opacity 0.2s ease;
+  z-index: 9999;
+}
+
+.bar-chart .alma-tooltip-visible {
+  opacity: 1;
+}
+
+.bar-chart .alma-tooltip-content {
+  max-width: 260px;
+}
+
+.bar-chart .alma-tooltip-content,
+.bar-chart .alma-tooltip-content * {
+  font-size: 12px !important;
+  line-height: 1.35 !important;
+}
+
+.bar-chart .x-axis {
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 1), minmax(var(--colMin, 72px), 1fr));
+  column-gap: var(--colGap, 24px);
+  padding: 2px -1px 0px 6px;
+  width: 100%;
+  box-sizing: border-box;
+  flex: 0 0 var(--x-axis-h);
+  height: var(--x-axis-h);
+  overflow: hidden;
+  align-items: end;
+}
+
+.bar-chart .label-wrapper {
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.bar-chart .label-5 {
+  align-self: stretch !important;
+  display: flex !important;
+  flex: 0 0 auto !important;
+  left: unset !important;
+  padding: 0px 4px !important;
+  top: unset !important;
+  width: 100% !important;
+}
+
+.bar-chart .label-instance-wrapper {
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  .bar-chart .chart-area {
+    transition: none;
+    opacity: 1;
+    transform: none;
+    clip-path: none;
+  }
+  .bar-chart .chart-bar {
+    transition: none !important;
+    transform: none !important;
+  }
+}
+
+

package/dist/LineBarHorizontal/LineBarHorizontal.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, MouseEventHandler } from "react";
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    label: boolean;
+    version: "primary";
+    color: "primary" | "secondary" | "tertiary" | "fourth";
+    className?: string;
+    style?: CSSProperties;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+}
+export declare const LineBarHorizontal: {
+    ({ label, version, color, className, style, onMouseEnter, onMouseLeave, }: Props): React.JSX.Element;
+    propTypes: {
+        label: PropTypes.Requireable<boolean>;
+        version: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export {};

package/dist/LineBarHorizontal/LineBarHorizontal.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { Label } from "../Label";
+import "./style.css";
+export const LineBarHorizontal = ({ label = true, version, color, className = "", style, onMouseEnter, onMouseLeave, }) => {
+    return (_jsx("div", { className: `line-bar-horizontal color-${color} ${className}`, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: label && (_jsx(Label, { bold: "on", className: "label-14", color: "black", divClassName: "instance-node", size: "small", spacing: "off", stroke: "off", text: "Label", version: version })) }));
+};
+LineBarHorizontal.propTypes = {
+    label: PropTypes.bool,
+    version: PropTypes.oneOf(["primary"]),
+    color: PropTypes.oneOf(["primary", "secondary", "tertiary", "fourth"]),
+    className: PropTypes.string,
+    style: PropTypes.object,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+};

package/dist/LineBarHorizontal/index.d.ts

@@ -0,0 +1 @@
+export { LineBarHorizontal } from "./LineBarHorizontal";

package/dist/LineBarHorizontal/index.js

@@ -0,0 +1 @@
+export { LineBarHorizontal } from "./LineBarHorizontal";