indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/ui/card.js

@@ -0,0 +1,58 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardContent = exports.CardDescription = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../../lib/utils.js");
+const Card = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("rounded-xl border bg-card text-card-foreground shadow", className), ...props })));
+exports.Card = Card;
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("flex flex-col space-y-1.5 p-6", className), ...props })));
+exports.CardHeader = CardHeader;
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("font-semibold leading-none tracking-tight", className), ...props })));
+exports.CardTitle = CardTitle;
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("text-sm text-muted-foreground", className), ...props })));
+exports.CardDescription = CardDescription;
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("p-6 pt-0", className), ...props })));
+exports.CardContent = CardContent;
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("flex items-center p-6 pt-0", className), ...props })));
+exports.CardFooter = CardFooter;
+CardFooter.displayName = "CardFooter";

package/dist/cjs/components/ui/chart.js

@@ -0,0 +1,160 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGridConfig = exports.createLegendConfig = exports.createTooltipConfig = exports.EChartsWrapper = exports.ChartStyle = exports.ChartContainer = void 0;
+exports.getColorsFromConfig = getColorsFromConfig;
+exports.getPayloadConfigFromPayload = getPayloadConfigFromPayload;
+exports.useChart = useChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+const utils_1 = require("../../lib/utils.js");
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' };
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error('useChart must be used within a <ChartContainer />');
+    }
+    return context;
+}
+const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    return ((0, jsx_runtime_1.jsx)(ChartContext.Provider, { value: { config }, children: (0, jsx_runtime_1.jsxs)("div", { "data-chart": chartId, ref: ref, className: (0, utils_1.cn)('flex aspect-video justify-center text-xs', className), ...props, children: [(0, jsx_runtime_1.jsx)(ChartStyle, { id: chartId, config: config }), children] }) }));
+});
+exports.ChartContainer = ChartContainer;
+ChartContainer.displayName = 'Chart';
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] ||
+                    itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join('\n')}
+}
+`)
+                .join('\n'),
+        } }));
+};
+exports.ChartStyle = ChartStyle;
+const EChartsWrapper = React.forwardRef(({ option, height = 300, width = '100%', className, onEvents, loading }, ref) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full', className), children: (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { ref: ref, option: option, style: { height, width }, opts: { renderer: 'canvas' }, onEvents: onEvents, showLoading: loading }) }));
+});
+exports.EChartsWrapper = EChartsWrapper;
+EChartsWrapper.displayName = 'EChartsWrapper';
+const createTooltipConfig = ({ trigger = 'axis', formatter, backgroundColor = 'rgba(255, 255, 255, 0.95)', borderColor = '#e5e7eb', textStyle = { color: '#344767', fontSize: 12 } } = {}) => {
+    return {
+        trigger,
+        formatter,
+        backgroundColor,
+        borderColor,
+        borderWidth: 1,
+        textStyle,
+        axisPointer: trigger === 'axis' ? { type: 'shadow' } : undefined
+    };
+};
+exports.createTooltipConfig = createTooltipConfig;
+const createLegendConfig = ({ position = 'bottom', orient = 'horizontal', itemWidth = 12, itemHeight = 12, textStyle = { color: '#6c757d', fontSize: 12 } } = {}) => {
+    const positionConfig = {
+        top: { top: 0 },
+        bottom: { bottom: 0 },
+        left: { left: 0 },
+        right: { right: 0 }
+    };
+    return {
+        ...positionConfig[position],
+        left: position === 'left' || position === 'right' ? undefined : 'center',
+        orient,
+        itemWidth,
+        itemHeight,
+        textStyle
+    };
+};
+exports.createLegendConfig = createLegendConfig;
+const createGridConfig = ({ top = 20, right = 20, bottom = 40, left = 40, containLabel = true } = {}) => {
+    return {
+        top,
+        right,
+        bottom,
+        left,
+        containLabel
+    };
+};
+exports.createGridConfig = createGridConfig;
+// Helper to get colors from config
+function getColorsFromConfig(config) {
+    return Object.values(config)
+        .map(item => item.color || item.theme?.light)
+        .filter((color) => !!color);
+}
+// Helper to extract item config from a payload
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== 'object' || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = 'payload' in payload &&
+        typeof payload.payload === 'object' &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === 'string') {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === 'string') {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config
+        ? config[configLabelKey]
+        : config[key];
+}

package/dist/cjs/components/ui/display/boolean-badge.js

@@ -0,0 +1,29 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanBadge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../lib/utils.js");
+const variantStyles = {
+    success: {
+        true: 'text-green-600 bg-green-100',
+        false: 'text-gray-400 bg-gray-100',
+    },
+    info: {
+        true: 'text-blue-600 bg-blue-100',
+        false: 'text-gray-400 bg-gray-100',
+    },
+    primary: {
+        true: 'text-[rgb(var(--color-primary))] bg-[color-mix(in_srgb,rgb(var(--color-primary))_10%,white)]',
+        false: 'text-gray-400 bg-gray-100',
+    },
+};
+exports.BooleanBadge = react_1.default.forwardRef(({ value, variant = 'success', className }, ref) => {
+    const styles = variantStyles[variant];
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, className: (0, utils_1.cn)('inline-flex items-center justify-center w-5 h-5 rounded-full', value ? styles.true : styles.false, className), children: value ? '✓' : '✗' }));
+});
+exports.BooleanBadge.displayName = 'BooleanBadge';

package/dist/cjs/components/ui/display/card.js

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardFooter = exports.CardContent = exports.CardDescription = exports.CardTitle = exports.CardHeader = exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const Card = ({ className, children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('card-base', className), ...props, children: children }));
+};
+exports.Card = Card;
+const CardHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('flex flex-col space-y-1.5 p-6', className), ...props }));
+exports.CardHeader = CardHeader;
+const CardTitle = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("h3", { className: (0, clsx_1.clsx)('text-2xl font-semibold leading-none tracking-tight', className), ...props }));
+exports.CardTitle = CardTitle;
+const CardDescription = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("p", { className: (0, clsx_1.clsx)('text-sm text-fg-muted', className), ...props }));
+exports.CardDescription = CardDescription;
+const CardContent = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('p-6 pt-0', className), ...props }));
+exports.CardContent = CardContent;
+const CardFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('flex items-center p-6 pt-0', className), ...props }));
+exports.CardFooter = CardFooter;

package/dist/cjs/components/ui/display/collapsible.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = void 0;
+const CollapsiblePrimitive = __importStar(require("@radix-ui/react-collapsible"));
+const Collapsible = CollapsiblePrimitive.Root;
+exports.Collapsible = Collapsible;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+exports.CollapsibleContent = CollapsibleContent;

package/dist/cjs/components/ui/display/separator.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const SeparatorPrimitive = __importStar(require("@radix-ui/react-separator"));
+const utils_1 = require("../../../lib/utils.js");
+const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: (0, utils_1.cn)("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
+exports.Separator = Separator;
+Separator.displayName = SeparatorPrimitive.Root.displayName;

package/dist/cjs/components/ui/display/stats-card.js

@@ -0,0 +1,29 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatsCard = StatsCard;
+exports.StatsGrid = StatsGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const card_1 = require("./card.js");
+const iconVariants = {
+    default: "bg-primary text-white",
+    accent: "bg-accent text-white",
+    warning: "bg-warning text-white",
+    error: "bg-error text-white"
+};
+function StatsCard({ title, value, icon: Icon, trend, description, className, variant = 'default' }) {
+    const TrendIcon = trend?.direction === 'up' ? lucide_react_1.TrendingUp : lucide_react_1.TrendingDown;
+    const trendColor = trend?.direction === 'up' ? 'text-success' : 'text-error';
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, { className: (0, utils_1.cn)("p-6 min-h-[140px] w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [Icon && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex-shrink-0 p-3 rounded-lg", iconVariants[variant]), children: (0, jsx_runtime_1.jsx)(Icon, { className: "h-6 w-6" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-semibold text-fg-default truncate", children: typeof value === 'number' ? value.toLocaleString() : value }), trend && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center text-sm font-semibold", trendColor), children: [(0, jsx_runtime_1.jsx)(TrendIcon, { className: "h-4 w-4 flex-shrink-0" }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-1", children: [Math.abs(trend.value), "%", trend.label && ` ${trend.label}`] })] }))] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-fg-muted mt-2 line-clamp-2", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-fg-subtle mt-1 line-clamp-1", children: description }))] })] }) }));
+}
+function StatsGrid({ children, columns = 4, className }) {
+    const gridCols = {
+        1: "grid-cols-1",
+        2: "grid-cols-1 md:grid-cols-2",
+        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("grid gap-4 sm:gap-6 w-full", gridCols[columns], className), children: children }));
+}

package/dist/cjs/components/ui/display/text.js

@@ -0,0 +1,94 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textVariants = exports.Text = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../lib/utils.js");
+const class_variance_authority_1 = require("class-variance-authority");
+const textVariants = (0, class_variance_authority_1.cva)('transition-colors', {
+    variants: {
+        variant: {
+            default: 'text-gray-900',
+            muted: 'text-gray-500',
+            primary: 'text-blue-600',
+            secondary: 'text-gray-600',
+            destructive: 'text-red-600',
+            success: 'text-green-600',
+            warning: 'text-orange-600',
+            link: 'text-blue-600 hover:text-blue-800 underline cursor-pointer',
+            'link-hover': 'text-black hover:text-blue-600 hover:underline cursor-pointer'
+        },
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            base: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+            '2xl': 'text-2xl',
+            '3xl': 'text-3xl',
+            '4xl': 'text-4xl'
+        },
+        weight: {
+            normal: 'font-normal',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold'
+        },
+        align: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right',
+            justify: 'text-justify'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'base',
+        weight: 'normal',
+        align: 'left'
+    }
+});
+exports.textVariants = textVariants;
+const Text = React.forwardRef(({ className, variant, size, weight, align, as: Component = 'span', truncate, children, ...props }, ref) => {
+    const textClasses = (0, utils_1.cn)(textVariants({ variant, size, weight, align }), truncate && 'truncate', className);
+    return React.createElement(Component, {
+        className: textClasses,
+        ref,
+        ...props
+    }, children);
+});
+exports.Text = Text;
+Text.displayName = 'Text';

package/dist/cjs/components/ui/feedback/alert.js

@@ -0,0 +1,61 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDescription = exports.AlertTitle = exports.Alert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../../lib/utils.js");
+const alertVariants = (0, class_variance_authority_1.cva)("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", {
+    variants: {
+        variant: {
+            default: "bg-background text-foreground",
+            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, role: "alert", className: (0, utils_1.cn)(alertVariants({ variant }), className), ...props })));
+exports.Alert = Alert;
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("h5", { ref: ref, className: (0, utils_1.cn)("mb-1 font-medium leading-none tracking-tight", className), ...props })));
+exports.AlertTitle = AlertTitle;
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("text-sm [&_p]:leading-relaxed", className), ...props })));
+exports.AlertDescription = AlertDescription;
+AlertDescription.displayName = "AlertDescription";

package/dist/cjs/components/ui/feedback/badge.js

@@ -0,0 +1,93 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeVariants = void 0;
+exports.Badge = Badge;
+exports.FilterBadge = FilterBadge;
+exports.FilterBadgeGroup = FilterBadgeGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../../lib/utils.js");
+const DeviceContext_1 = require("../../../contexts/DeviceContext.js");
+const dropdown_1 = require("../../forms/dropdown/index.js");
+const badgeVariants = (0, class_variance_authority_1.cva)("inline-flex items-center rounded-full border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 truncate", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
+            // Department-style badge with CSS variables
+            department: "border-transparent bg-[color-mix(in_srgb,rgb(var(--color-primary))_10%,white)] text-[rgb(var(--color-primary))]",
+            // Module type style badge
+            module: "border-transparent bg-[color-mix(in_srgb,rgb(var(--color-purple))_10%,white)] text-[rgb(var(--color-purple))]",
+            // Status badges
+            success: "border-transparent bg-[rgb(var(--color-success-subtle))] text-[rgb(var(--color-success))]",
+            warning: "border-transparent bg-yellow-100 text-yellow-800",
+            danger: "border-transparent bg-red-100 text-red-800",
+            info: "border-transparent bg-blue-100 text-blue-800",
+            // Additional color variants for departments
+            purple: "border-transparent bg-purple-100 text-purple-800",
+            pink: "border-transparent bg-pink-100 text-pink-800",
+            orange: "border-transparent bg-orange-100 text-orange-800",
+            teal: "border-transparent bg-teal-100 text-teal-800",
+            cyan: "border-transparent bg-cyan-100 text-cyan-800",
+            indigo: "border-transparent bg-indigo-100 text-indigo-800",
+            violet: "border-transparent bg-violet-100 text-violet-800",
+            amber: "border-transparent bg-amber-100 text-amber-800",
+            lime: "border-transparent bg-lime-100 text-lime-800",
+            emerald: "border-transparent bg-emerald-100 text-emerald-800",
+            sky: "border-transparent bg-sky-100 text-sky-800",
+            rose: "border-transparent bg-rose-100 text-rose-800",
+            // Clickable filter variants (selected state)
+            'primary-selected': "border-transparent bg-[rgb(var(--color-primary))] text-white shadow-md",
+            'warning-selected': "border-transparent bg-[rgb(var(--color-warning))] text-white shadow-md",
+            'success-selected': "border-transparent bg-[rgb(var(--color-success))] text-white shadow-md",
+            'orange-selected': "border-transparent bg-[rgb(var(--color-orange))] text-white shadow-md",
+            'error-selected': "border-transparent bg-[rgb(var(--color-error))] text-white shadow-md",
+            // Clickable filter variants (unselected state)
+            'primary-unselected': "border-transparent bg-[rgb(var(--color-primary-subtle))] text-[rgb(var(--color-primary))] hover:opacity-80",
+            'warning-unselected': "border-transparent bg-[rgb(var(--color-warning-subtle))] text-[rgb(var(--color-warning))] hover:opacity-80",
+            'success-unselected': "border-transparent bg-[rgb(var(--color-success-subtle))] text-[rgb(var(--color-success))] hover:opacity-80",
+            'orange-unselected': "border-transparent bg-[rgb(var(--color-orange-subtle))] text-[rgb(var(--color-orange))] hover:opacity-80",
+            'error-unselected': "border-transparent bg-[rgb(var(--color-error-subtle))] text-[rgb(var(--color-error))] hover:opacity-80",
+        },
+        size: {
+            default: "px-1.5 sm:px-2.5 py-0.5 text-[10px] sm:text-xs",
+            sm: "px-1.5 py-0 text-[9px] leading-4",
+            lg: "px-3 py-1 text-sm",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+exports.badgeVariants = badgeVariants;
+function Badge({ className, variant, size, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(badgeVariants({ variant, size }), className), ...props }));
+}
+Badge.displayName = 'Badge';
+function FilterBadge({ label, shortLabel, count, variant, selected = false, className, ...props }) {
+    const selectedVariant = `${variant}-selected`;
+    const unselectedVariant = `${variant}-unselected`;
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, utils_1.cn)(badgeVariants({ variant: selected ? selectedVariant : unselectedVariant }), 'px-2 sm:px-3 py-1 sm:py-1.5 font-semibold cursor-pointer hover:scale-105 transition-all', className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: label }), shortLabel && (0, jsx_runtime_1.jsx)("span", { className: "sm:hidden", children: shortLabel }), !shortLabel && (0, jsx_runtime_1.jsx)("span", { className: "sm:hidden", children: label }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-0.5 sm:ml-1 opacity-75", children: ["(", count, ")"] })] }));
+}
+FilterBadge.displayName = 'FilterBadge';
+const variantColorVar = {
+    primary: '--color-primary',
+    warning: '--color-warning',
+    success: '--color-success',
+    orange: '--color-orange',
+    error: '--color-error',
+};
+function FilterBadgeGroup({ items, selected, onSelect, className }) {
+    const { isMobile } = (0, DeviceContext_1.useDevice)();
+    if (isMobile) {
+        const selectedItem = items.find(i => i.id === selected);
+        const cssVar = selectedItem ? variantColorVar[selectedItem.variant] : '--color-primary';
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('rounded-full overflow-hidden min-w-0 [&_button]:!bg-transparent [&_button]:!border-transparent [&_button]:!text-white [&_button]:!shadow-none [&_svg]:!text-white [&_button]:!min-h-0 [&_[role=button]]:!min-h-0 [&_button]:!h-7 [&_[role=button]]:!h-7', className), style: { backgroundColor: `rgb(var(${cssVar}))` }, children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: items.map(item => ({ value: item.id, label: `${item.label} (${item.count})` })), value: selected, onValueChange: (val) => onSelect(val), size: "sm", clearable: false }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex items-center justify-start gap-2 flex-wrap', className), children: items.map(item => ((0, jsx_runtime_1.jsx)(FilterBadge, { label: item.label, shortLabel: item.shortLabel, count: item.count, variant: item.variant, selected: selected === item.id, onClick: () => onSelect(item.id) }, item.id))) }));
+}
+FilterBadgeGroup.displayName = 'FilterBadgeGroup';