entangle-ui 0.2.0 → 0.3.0

package/dist/esm/components/navigation/Tabs/Tab.js

@@ -0,0 +1,222 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import styled from '@emotion/styled';
+import { useTabsContext } from './Tabs.js';
+import '../../primitives/Icon/Icon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+
+const TAB_SIZE_MAP = {
+    sm: {
+        height: 24,
+        paddingKey: 'sm',
+        fontKey: 'xs',
+        iconSize: 11,
+    },
+    md: {
+        height: 28,
+        paddingKey: 'md',
+        fontKey: 'sm',
+        iconSize: 13,
+    },
+    lg: {
+        height: 32,
+        paddingKey: 'lg',
+        fontKey: 'md',
+        iconSize: 15,
+    },
+};
+const StyledTab = styled.button `
+  /* Reset */
+  margin: 0;
+  border: none;
+  font-family: inherit;
+  outline: none;
+  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+  white-space: nowrap;
+  background: transparent;
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${props => props.theme.spacing.xs}px;
+  position: relative;
+  flex-shrink: 0;
+
+  /* Sizing */
+  height: ${props => TAB_SIZE_MAP[props.$size].height}px;
+  padding: 0
+    ${props => props.theme.spacing[TAB_SIZE_MAP[props.$size].paddingKey]}px;
+  font-size: ${props => props.theme.typography.fontSize[TAB_SIZE_MAP[props.$size].fontKey]}px;
+  font-weight: ${props => props.theme.typography.fontWeight.medium};
+  line-height: ${props => props.theme.typography.lineHeight.tight};
+  transition: all ${props => props.theme.transitions.fast};
+  min-width: 0;
+
+  /* Full width */
+  ${props => props.$fullWidth && 'flex: 1;'}
+
+  /* Disabled */
+  opacity: ${props => (props.$disabled ? 0.5 : 1)};
+
+  /* Variant styles */
+  ${props => {
+    const { colors } = props.theme;
+    switch (props.$variant) {
+        case 'underline':
+            return `
+          color: ${props.$active ? colors.text.primary : colors.text.secondary};
+          background: ${props.$active ? colors.surface.active : 'transparent'};
+          ${props.$active
+                ? props.$orientation === 'vertical'
+                    ? 'margin-right: -1px;'
+                    : 'margin-bottom: -1px;'
+                : ''}
+
+          &::after {
+            content: '';
+            position: absolute;
+            border-radius: ${props.theme.borderRadius.sm}px;
+            background: ${colors.accent.primary};
+            opacity: ${props.$active ? 1 : 0};
+            transition: opacity ${props.theme.transitions.fast};
+            ${props.$orientation === 'vertical'
+                ? `
+                  top: 0;
+                  bottom: 0;
+                  right: -1px;
+                  width: 2px;
+                `
+                : `
+                  left: 0;
+                  right: 0;
+                  bottom: -1px;
+                  height: 2px;
+                `}
+          }
+
+          &:hover:not(:disabled) {
+            color: ${colors.text.primary};
+            background: ${colors.surface.hover};
+          }
+        `;
+        case 'pills':
+            return `
+          color: ${props.$active ? colors.text.primary : colors.text.secondary};
+          background: ${props.$active ? colors.surface.active : colors.background.secondary};
+          border: 1px solid ${props.$active ? colors.border.default : 'transparent'};
+          border-radius: ${props.theme.borderRadius.md}px;
+
+          &:hover:not(:disabled) {
+            background: ${props.$active ? colors.surface.active : colors.surface.hover};
+          }
+        `;
+        case 'enclosed':
+            return `
+          color: ${props.$active ? colors.text.primary : colors.text.secondary};
+          ${props.$active
+                ? `
+                border: 1px solid ${colors.border.default};
+                background: ${colors.background.primary};
+                ${props.$orientation === 'vertical'
+                    ? `
+                      border-right-color: ${colors.background.primary};
+                      border-radius: ${props.theme.borderRadius.md}px 0 0 ${props.theme.borderRadius.md}px;
+                      margin-right: -1px;
+                    `
+                    : `
+                      border-bottom-color: ${colors.background.primary};
+                      border-radius: ${props.theme.borderRadius.md}px ${props.theme.borderRadius.md}px 0 0;
+                      margin-bottom: -1px;
+                    `}
+              `
+                : `
+                background: ${colors.surface.default};
+                border: 1px solid transparent;
+              `}
+
+          &:hover:not(:disabled) {
+            color: ${colors.text.primary};
+            background: ${props.$active ? colors.background.primary : colors.surface.hover};
+          }
+        `;
+        default:
+            return '';
+    }
+}}
+
+  /* Focus visible */
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+    z-index: 1;
+  }
+`;
+const StyledTabIcon = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: ${props => props.$size}px;
+    height: ${props => props.$size}px;
+  }
+`;
+const StyledCloseButton = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: ${props => props.theme.colors.text.muted};
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  padding: 2px;
+  margin-left: ${props => props.theme.spacing.sm}px;
+  transition: all ${props => props.theme.transitions.fast};
+
+  &:hover {
+    color: ${props => props.theme.colors.text.primary};
+    background: ${props => props.theme.colors.surface.hover};
+  }
+
+  svg {
+    color: currentColor;
+  }
+`;
+// --- Component ---
+const Tab = ({ value, children, icon, disabled = false, closable = false, onClose, className, style, testId, ref, ...rest }) => {
+    const { activeValue, setActiveValue, variant, size, orientation, fullWidth, tabsId, } = useTabsContext();
+    const isActive = activeValue === value;
+    const sizeConfig = TAB_SIZE_MAP[size];
+    const closeIconSize = size === 'lg' ? 'md' : 'sm';
+    const tabId = `tabs-${tabsId}-tab-${value}`;
+    const panelId = `tabs-${tabsId}-panel-${value}`;
+    const handleClick = useCallback(() => {
+        if (!disabled) {
+            setActiveValue(value);
+        }
+    }, [disabled, setActiveValue, value]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!disabled) {
+                setActiveValue(value);
+            }
+        }
+        if (e.key === 'Delete' && closable && onClose) {
+            e.preventDefault();
+            onClose(value);
+        }
+    }, [disabled, setActiveValue, value, closable, onClose]);
+    const handleClose = useCallback((e) => {
+        e.stopPropagation();
+        onClose?.(value);
+    }, [onClose, value]);
+    return (jsxs(StyledTab, { ref: ref, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": panelId, "aria-disabled": disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, "$active": isActive, "$disabled": disabled, "$variant": variant, "$size": size, "$orientation": orientation, "$fullWidth": fullWidth, className: className, style: style, "data-testid": testId, ...rest, children: [icon && (jsx(StyledTabIcon, { "$size": sizeConfig.iconSize, children: icon })), children, closable && (jsx(StyledCloseButton, { role: "button", "aria-label": `Close ${typeof children === 'string' ? children : value}`, onClick: handleClose, children: jsx(CloseIcon, { size: closeIconSize, decorative: true }) }))] }));
+};
+Tab.displayName = 'Tab';
+
+export { Tab };
+//# sourceMappingURL=Tab.js.map

package/dist/esm/components/navigation/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/navigation/Tabs/TabList.js

@@ -0,0 +1,115 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import styled from '@emotion/styled';
+import { useTabsContext } from './Tabs.js';
+
+const StyledTabList = styled.div `
+  display: flex;
+  flex-direction: ${props => props.$orientation === 'vertical' ? 'column' : 'row'};
+  align-items: stretch;
+  overflow-x: ${props => props.$orientation === 'horizontal' ? 'auto' : 'visible'};
+  overflow-y: ${props => props.$orientation === 'vertical' ? 'auto' : 'visible'};
+  flex-shrink: 0;
+  min-width: 0;
+  gap: ${props => props.theme.spacing.xs}px;
+
+  /* Hide scrollbar */
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Variant-specific styles */
+  ${props => {
+    const { colors } = props.theme;
+    switch (props.$variant) {
+        case 'underline':
+            return props.$orientation === 'vertical'
+                ? `border-right: 1px solid ${colors.border.default};`
+                : `border-bottom: 1px solid ${colors.border.default};`;
+        case 'enclosed':
+            return props.$orientation === 'vertical'
+                ? `
+              border-right: 1px solid ${colors.border.default};
+              padding: ${props.theme.spacing.xs}px 0;
+            `
+                : `
+              border-bottom: 1px solid ${colors.border.default};
+              padding: 0 ${props.theme.spacing.xs}px;
+            `;
+        case 'pills':
+            return props.$pillsFrame
+                ? `
+              padding: ${props.theme.spacing.xs}px;
+              border: 1px solid ${colors.border.default};
+              border-radius: ${props.theme.borderRadius.md}px;
+              background: ${colors.background.secondary};
+            `
+                : `
+              padding: 0;
+              border: none;
+              border-radius: 0;
+              background: transparent;
+            `;
+        default:
+            return '';
+    }
+}}
+`;
+// --- Component ---
+const TabList = ({ children, className, style, testId, ref, ...rest }) => {
+    const { orientation, variant, fullWidth, pillsFrame } = useTabsContext();
+    const listRef = useRef(null);
+    const setListRef = useCallback((node) => {
+        listRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleKeyDown = useCallback((e) => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const tabs = Array.from(list.querySelectorAll('[role="tab"]'));
+        const currentIndex = tabs.indexOf(e.target);
+        if (currentIndex === -1)
+            return;
+        const isHorizontal = orientation === 'horizontal';
+        const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        let nextIndex = null;
+        switch (e.key) {
+            case nextKey:
+                e.preventDefault();
+                nextIndex = currentIndex + 1;
+                if (nextIndex >= tabs.length)
+                    nextIndex = 0;
+                break;
+            case prevKey:
+                e.preventDefault();
+                nextIndex = currentIndex - 1;
+                if (nextIndex < 0)
+                    nextIndex = tabs.length - 1;
+                break;
+            case 'Home':
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                e.preventDefault();
+                nextIndex = tabs.length - 1;
+                break;
+        }
+        if (nextIndex !== null) {
+            tabs[nextIndex]?.focus();
+        }
+    }, [orientation]);
+    return (jsx(StyledTabList, { ref: setListRef, role: "tablist", "aria-orientation": orientation, "$orientation": orientation, "$variant": variant, "$fullWidth": fullWidth, "$pillsFrame": pillsFrame, className: className, style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: children }));
+};
+TabList.displayName = 'TabList';
+
+export { TabList };
+//# sourceMappingURL=TabList.js.map

package/dist/esm/components/navigation/Tabs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/navigation/Tabs/TabList.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/navigation/Tabs/TabPanel.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { useTabsContext } from './Tabs.js';
+
+// --- Styled ---
+const StyledTabPanel = styled.div `
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  outline: none;
+`;
+// --- Component ---
+const TabPanel = ({ value, children, keepMounted = false, className, style, testId, ref, ...rest }) => {
+    const { activeValue, tabsId } = useTabsContext();
+    const isActive = activeValue === value;
+    const tabId = `tabs-${tabsId}-tab-${value}`;
+    const panelId = `tabs-${tabsId}-panel-${value}`;
+    if (!isActive && !keepMounted) {
+        return null;
+    }
+    return (jsx(StyledTabPanel, { ref: ref, role: "tabpanel", id: panelId, "aria-labelledby": tabId, tabIndex: isActive ? 0 : -1, hidden: !isActive || undefined, className: className, style: {
+            ...style,
+            ...(isActive ? undefined : { display: 'none' }),
+        }, "data-testid": testId, ...rest, children: children }));
+};
+TabPanel.displayName = 'TabPanel';
+
+export { TabPanel };
+//# sourceMappingURL=TabPanel.js.map

package/dist/esm/components/navigation/Tabs/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQhC;AAED;AAEa,MAAA,QAAQ,GAA4B,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AAChD,IAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,KAAK;AAEtC,IAAA,MAAM,KAAK,GAAG,CAAA,KAAA,EAAQ,MAAM,CAAQ,KAAA,EAAA,KAAK,EAAE;AAC3C,IAAA,MAAM,OAAO,GAAG,CAAA,KAAA,EAAQ,MAAM,CAAU,OAAA,EAAA,KAAK,EAAE;AAE/C,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE;AAC7B,QAAA,OAAO,IAAI;;AAGb,IAAA,QACEA,GAAC,CAAA,cAAc,IACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,qBACM,KAAK,EACtB,QAAQ,EAAE,QAAQ,GAAG,CAAC,GAAG,EAAE,EAC3B,MAAM,EAAE,CAAC,QAAQ,IAAI,SAAS,EAC9B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;AACL,YAAA,GAAG,KAAK;AACR,YAAA,IAAI,QAAQ,GAAG,SAAS,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AAChD,SAAA,EAAA,aAAA,EACY,MAAM,EACf,GAAA,IAAI,YAEP,QAAQ,EAAA,CACM;AAErB;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/components/navigation/Tabs/Tabs.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, useCallback, useMemo, createContext, useContext } from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+// --- Context ---
+const TabsContext = /*#__PURE__*/ createContext(null);
+function useTabsContext() {
+    const ctx = useContext(TabsContext);
+    if (!ctx) {
+        throw new Error('Tabs compound components must be used within <Tabs>');
+    }
+    return ctx;
+}
+const StyledTabsRoot = styled.div `
+  display: flex;
+  flex-direction: ${props => props.$orientation === 'vertical' ? 'row' : 'column'};
+  min-width: 0;
+  min-height: 0;
+
+  ${props => processCss(props.$css, props.theme)}
+`;
+// --- Component ---
+/**
+ * Tabs component for switching between views within a panel.
+ *
+ * Compound component pattern: use with TabList, Tab, and TabPanel.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="properties">
+ *   <TabList>
+ *     <Tab value="properties">Properties</Tab>
+ *     <Tab value="materials">Materials</Tab>
+ *   </TabList>
+ *   <TabPanel value="properties">Properties content</TabPanel>
+ *   <TabPanel value="materials">Materials content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'md', orientation = 'horizontal', fullWidth = false, pillsFrame = true, children, onChange, className, style, css, testId, ref, ...rest }) => {
+    const autoId = useId();
+    const tabsId = autoId;
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+    const isControlled = valueProp !== undefined;
+    const activeValue = isControlled ? valueProp : internalValue;
+    const setActiveValue = useCallback((val) => {
+        if (!isControlled) {
+            setInternalValue(val);
+        }
+        onChange?.(val);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({
+        activeValue,
+        setActiveValue,
+        variant,
+        size,
+        orientation,
+        fullWidth,
+        pillsFrame,
+        tabsId,
+    }), [
+        activeValue,
+        setActiveValue,
+        variant,
+        size,
+        orientation,
+        fullWidth,
+        pillsFrame,
+        tabsId,
+    ]);
+    return (jsx(TabsContext.Provider, { value: contextValue, children: jsx(StyledTabsRoot, { ref: ref, "$orientation": orientation, "$css": css, className: className, style: style, "data-testid": testId, ...rest, children: children }) }));
+};
+Tabs.displayName = 'Tabs';
+
+export { Tabs, useTabsContext };
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/components/navigation/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAYA;AAEA,MAAM,WAAW,iBAAiB,aAAa,CAA0B,IAAI,CAAC;SAE9D,cAAc,GAAA;AAC5B,IAAA,MAAM,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC;IACnC,IAAI,CAAC,GAAG,EAAE;AACR,QAAA,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC;;AAExE,IAAA,OAAO,GAAG;AACZ;AASA,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAqB;;AAElC,kBAAA,EAAA,KAAK,IACrB,KAAK,CAAC,YAAY,KAAK,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;;;;AAIpD,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;AAEA;;;;;;;;;;;;;;;;AAgBG;MACU,IAAI,GAAwB,CAAC,EACxC,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,MAAM,GAAG,KAAK,EAAE;IACtB,MAAM,MAAM,GAAG,MAAM;AAErB,IAAA,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,EAAE,CAAC;AACtE,IAAA,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS;IAC5C,MAAM,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa;AAE5D,IAAA,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,GAAW,KAAI;QACd,IAAI,CAAC,YAAY,EAAE;YACjB,gBAAgB,CAAC,GAAG,CAAC;;AAEvB,QAAA,QAAQ,GAAG,GAAG,CAAC;AACjB,KAAC,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,CAC1B,OAAO;QACL,WAAW;QACX,cAAc;QACd,OAAO;QACP,IAAI;QACJ,WAAW;QACX,SAAS;QACT,UAAU;QACV,MAAM;AACP,KAAA,CAAC,EACF;QACE,WAAW;QACX,cAAc;QACd,OAAO;QACP,IAAI;QACJ,WAAW;QACX,SAAS;QACT,UAAU;QACV,MAAM;AACP,KAAA,CACF;AAED,IAAA,QACEA,GAAC,CAAA,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACvCA,IAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EACM,cAAA,EAAA,WAAW,EACnB,MAAA,EAAA,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACC,aAAA,EAAA,MAAM,KACf,IAAI,EAAA,QAAA,EAEP,QAAQ,EACM,CAAA,EAAA,CACI;AAE3B;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/esm/components/primitives/BaseButton/BaseButton.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const BaseButton = /*#__PURE__*/ forwardRef(({ className, disabled = false, children, ...props }, ref) => {
+    return (jsx("button", { ref: ref, className: cn(
+        // Reset only some styles, not all
+        'bg-transparent p-0 m-0', 
+        // Base interactive styles
+        'cursor-pointer select-none', 'focus:outline-none', 
+        // Disabled state
+        disabled && 'cursor-not-allowed', className), disabled: disabled, ...props, children: children }));
+});
+BaseButton.displayName = 'BaseButton';
+
+export { BaseButton };
+//# sourceMappingURL=BaseButton.js.map

package/dist/esm/components/primitives/BaseButton/BaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","sources":["../../../../../../src/components/primitives/BaseButton/BaseButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAgBa,MAAA,UAAU,iBAAiB,UAAU,CAGhD,CAAC,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IAC7D,QACEA,gBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE;;QAEX,wBAAwB;;AAExB,QAAA,4BAA4B,EAC5B,oBAAoB;;AAEpB,QAAA,QAAQ,IAAI,oBAAoB,EAChC,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,KACd,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACF;AAEb,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}