@bouku/core 0.2.4 → 0.2.5

package/dist/components/card/media.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const flex_1 = require("../container/flex");
 const badge_1 = __importDefault(require("../text/badge"));
-const MediaCard = ({ media, title, subtitle, badge, styles = {}, }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-px min-w-0", children: [(0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: "items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && (0, jsx_runtime_1.jsx)(badge_1.default, { size: "xs", children: badge })] }), subtitle && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));
+const MediaCard = ({ media, title, subtitle, badge, styles = {}, }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-px min-w-0", children: [(0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: "items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && (0, jsx_runtime_1.jsx)(badge_1.default, { size: "sm", children: badge })] }), subtitle && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));
 exports.default = MediaCard;

package/dist/components/text/badge.d.ts

@@ -2,7 +2,7 @@ import type { Component } from "../../utils";
 type Props = Component & {
     color?: string;
     icon?: React.ReactNode;
-    size?: "xs" | "sm" | "md";
+    size?: "sm" | "md" | "lg";
 };
 /**
  * Color-themed badge component.
@@ -14,5 +14,5 @@ type Props = Component & {
  *
  * @param {string} color - Color of badge. (optional, default = accent)
 **/
-export declare function Badge({ style, color, size, icon, children }: Props): import("react").JSX.Element | null;
+export declare function Badge({ style, color, size, children }: Props): import("react").JSX.Element | null;
 export default Badge;

package/dist/components/text/badge.js

@@ -14,11 +14,9 @@ const tailwind_variants_1 = require("tailwind-variants");
  *
  * @param {string} color - Color of badge. (optional, default = accent)
 **/
-function Badge({ style, color = "--color-accent", size = "md", icon, children }) {
+function Badge({ style, color = "--color-accent", size = "md", children }) {
     if (!children)
         return null;
-    if (color === "future")
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 test-badge", children: [icon && (0, jsx_runtime_1.jsx)("div", { className: "text-primary-dark", children: icon }), (0, jsx_runtime_1.jsx)("span", { children: children })] }));
     return ((0, jsx_runtime_1.jsx)("span", { className: (0, style_1.cn)(base({ size }), style), style: styles(color), children: children }));
 }
 const styles = (color) => ({
@@ -30,12 +28,12 @@ const styles = (color) => ({
     color: "var(--color-primary)"
 });
 const base = (0, tailwind_variants_1.tv)({
-    base: "w-min",
+    base: "w-min px-2 py-1",
     variants: {
         size: {
-            xs: "px-1 py-px text-[0.5rem]",
-            sm: "px-1 py-px text-xs",
-            md: "px-2 py-1 text-sm"
+            sm: "text-xs",
+            md: "text-sm",
+            lg: "text-base"
         }
     }
 });

package/dist/utils/functions/style.js

@@ -51,10 +51,17 @@ function opacitize(color, opacity = 0.5) {
                 transparent
             )
         `;
+    if (color.startsWith("--"))
+        return `
+            color-mix(
+                in srgb, 
+                var(${color}) ${opacity * 100}%, 
+                transparent
+            )
+        `;
     const { r, g, b } = parseHex(color);
     return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 }
-;
 const parseHex = (input) => {
     let hex = input.replace("#", "");
     if (hex.length === 3)

package/dist/utils/types/element.d.ts

@@ -23,6 +23,10 @@ export type Hoverable = {
 export type ListItem = {
     index: number;
 };
+export type LabeledItem = {
+    id: string;
+    label: string;
+};
 export interface NavItem {
     label: string;
     href: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouku/core",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",