@orca-so/design-system - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/index.d.ts

@@ -5,2 +5,4 @@ export * from "./stories/Callout";
 export * from "./stories/Colors";
+export * from "./stories/Toast/hook";
+export * from "./stories/Icons";
 export * from "./stories/Input";
@@ -7,0 +9,0 @@ export * from "./stories/Label";

dist/index.js

@@ -21,2 +21,4 @@ "use strict";
 __exportStar(require("./stories/Colors"), exports);
+__exportStar(require("./stories/Toast/hook"), exports);
+__exportStar(require("./stories/Icons"), exports);
 __exportStar(require("./stories/Input"), exports);
@@ -23,0 +25,0 @@ __exportStar(require("./stories/Label"), exports);

dist/stories/Button/index.d.ts

@@ -5,3 +5,3 @@ import type { VariantProps } from "class-variance-authority";
 export declare const buttonVariants: (props?: {
-    variant?: "link" | "destructive" | "primary" | "secondary" | "ghost";
+    variant?: "link" | "destructive" | "primary" | "secondary" | "ghost" | "toast";
     size?: "full" | "intrinsic" | "icon";
@@ -8,0 +8,0 @@ } & import("class-variance-authority/dist/types").ClassProp) => string;

dist/stories/Button/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,7 +29,7 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.Button = exports.buttonVariants = void 0;
-const react_slot_1 = require("@radix-ui/react-slot");
-const class_variance_authority_1 = require("class-variance-authority");
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+var react_slot_1 = require("@radix-ui/react-slot");
+var class_variance_authority_1 = require("class-variance-authority");
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = __importDefault(require("react"));
+var react_2 = require("react");
 exports.buttonVariants = (0, class_variance_authority_1.cva)((0, clsx_1.default)("inline-flex items-center justify-center", "whitespace-nowrap rounded-md text-sm font-medium", "disabled:cursor-not-allowed", "outline-offset-2 outline-focus focus-visible:outline-1"), {
@@ -19,4 +41,5 @@ variants: {
             secondary: (0, clsx_1.default)("text-primary enabled:bg-secondary enabled:hover:bg-secondary-hover", "disabled:bg-disabled"),
-            ghost: (0, clsx_1.default)("text-link enabled:bg-transparent enabled:hover:bg-surface", "disabled:text-tertiary"),
-            link: (0, clsx_1.default)("enabled:text-link enabled:bg-transparent enabled:hover:underline"),
+            ghost: (0, clsx_1.default)("text-link enabled:bg-transparent enabled:hover:bg-surface-hover", "disabled:text-tertiary"),
+            link: (0, clsx_1.default)("enabled:text-link enabled:bg-transparent enabled:hover:text-link-hover"),
+            toast: (0, clsx_1.default)("text-primary enabled:bg-blue-700 enabled:hover:bg-blue-600"),
         },
@@ -34,7 +57,8 @@ size: {
 });
-exports.Button = (0, react_2.forwardRef)(({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? react_slot_1.Slot : "button";
-    return (react_1.default.createElement(Comp, { className: (0, exports.buttonVariants)({ variant, size, className }), ref: ref, ...props }));
+exports.Button = (0, react_2.forwardRef)(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, size = _a.size, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "size", "asChild"]);
+    var Comp = asChild ? react_slot_1.Slot : "button";
+    return (react_1.default.createElement(Comp, __assign({ className: (0, exports.buttonVariants)({ variant: variant, size: size, className: className }), ref: ref }, props)));
 });
 exports.Button.displayName = "Button";
 //# sourceMappingURL=index.js.map

dist/stories/ButtonGroup/index.js

 "use client";
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -26,2 +37,13 @@ if (k2 === undefined) k2 = k;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -32,19 +54,22 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.ButtonGroup = exports.ButtonGroupItem = exports.ButtonGroupRoot = void 0;
-const react_radio_group_1 = require("@radix-ui/react-radio-group");
-const Button_1 = require("../Button");
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = __importStar(require("react"));
-exports.ButtonGroupRoot = (0, react_1.forwardRef)(({ className, ...props }, ref) => {
-    return (react_1.default.createElement(react_radio_group_1.Root, { className: (0, clsx_1.default)("flex flex-row items-stretch rounded-md h-12 overflow-hidden bg-secondary", className), ...props, ref: ref }));
+var react_radio_group_1 = require("@radix-ui/react-radio-group");
+var Button_1 = require("../Button");
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = __importStar(require("react"));
+exports.ButtonGroupRoot = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (react_1.default.createElement(react_radio_group_1.Root, __assign({ className: (0, clsx_1.default)("flex flex-row items-stretch rounded-md h-12 overflow-hidden bg-secondary", className) }, props, { ref: ref })));
 });
 exports.ButtonGroupRoot.displayName = react_radio_group_1.Root.displayName;
-exports.ButtonGroupItem = (0, react_1.forwardRef)(({ className, ...props }, ref) => {
+exports.ButtonGroupItem = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
     return (react_1.default.createElement(Button_1.Button, { asChild: true, variant: "secondary", className: (0, clsx_1.default)("h-full w-full py-3 rounded-none text-md bg-secondary hover:bg-secondary-hover", "aria-checked:bg-primary aria-checked:hover:bg-primary-hover", className) },
-        react_1.default.createElement(react_radio_group_1.Item, { ref: ref, className: "grow border-r-2 border-blue-900 last:border-r-0", ...props }, props.children)));
+        react_1.default.createElement(react_radio_group_1.Item, __assign({ ref: ref, className: "grow border-r-2 border-blue-900 last:border-r-0" }, props), props.children)));
 });
 exports.ButtonGroupItem.displayName = react_radio_group_1.Item.displayName;
-exports.ButtonGroup = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
-    return (react_1.default.createElement(exports.ButtonGroupRoot, { ref: ref, ...props }, children && children.map((child, index) => (react_1.default.createElement(exports.ButtonGroupItem, { key: index, value: index.toString() }, child)))));
+exports.ButtonGroup = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement(exports.ButtonGroupRoot, __assign({ ref: ref }, props), children && children.map(function (child, index) { return (react_1.default.createElement(exports.ButtonGroupItem, { key: index, value: index.toString() }, child)); })));
 });
 exports.ButtonGroup.displayName = "ButtonGroup";
 //# sourceMappingURL=index.js.map

dist/stories/Callout/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -25,2 +36,13 @@ if (k2 === undefined) k2 = k;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -31,6 +53,6 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.CalloutDescription = exports.CalloutTitle = exports.Callout = exports.calloutVariants = void 0;
-const class_variance_authority_1 = require("class-variance-authority");
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = __importStar(require("react"));
-const go_1 = require("react-icons/go");
+var class_variance_authority_1 = require("class-variance-authority");
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = __importStar(require("react"));
+var go_1 = require("react-icons/go");
 exports.calloutVariants = (0, class_variance_authority_1.cva)("flex items-center gap-x-2 flex relative w-full rounded-md py-2.5 px-3 border text-sm", {
@@ -48,3 +70,3 @@ variants: {
 });
-const icons = {
+var icons = {
     info: react_1.default.createElement(go_1.GoInfo, { className: "h-5 w-5" }),
@@ -54,5 +76,6 @@ destructive: react_1.default.createElement(go_1.GoXCircle, { className: "h-5 w-5" }),
 };
-exports.Callout = (0, react_1.forwardRef)(({ className, variant, children, ...props }, ref) => {
-    const Icon = icons[variant ?? "info"];
-    return (react_1.default.createElement("div", { ref: ref, role: "alert", className: (0, clsx_1.default)((0, exports.calloutVariants)({ variant }), className), ...props },
+exports.Callout = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["className", "variant", "children"]);
+    var Icon = icons[variant !== null && variant !== void 0 ? variant : "info"];
+    return (react_1.default.createElement("div", __assign({ ref: ref, role: "alert", className: (0, clsx_1.default)((0, exports.calloutVariants)({ variant: variant }), className) }, props),
         Icon || react_1.default.createElement(react_1.default.Fragment, null),
@@ -62,6 +85,12 @@ children));
 exports.Callout.displayName = "Callout";
-exports.CalloutTitle = (0, react_1.forwardRef)(({ className, ...props }, ref) => (react_1.default.createElement("h5", { ref: ref, className: (0, clsx_1.default)("font-medium leading-4 tracking-tight", className), ...props })));
+exports.CalloutTitle = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (react_1.default.createElement("h5", __assign({ ref: ref, className: (0, clsx_1.default)("font-medium leading-4 tracking-tight", className) }, props)));
+});
 exports.CalloutTitle.displayName = "CalloutTitle";
-exports.CalloutDescription = (0, react_1.forwardRef)(({ className, ...props }, ref) => (react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)("opacity-90 [&_p]:leading-relaxed", className), ...props })));
+exports.CalloutDescription = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (react_1.default.createElement("div", __assign({ ref: ref, className: (0, clsx_1.default)("opacity-90 [&_p]:leading-relaxed", className) }, props)));
+});
 exports.CalloutDescription.displayName = "CalloutDescription";
 //# sourceMappingURL=index.js.map

dist/stories/Colors/index.js

@@ -7,6 +7,6 @@ "use strict";
 exports.ColorsWithAlpha = exports.Colors = void 0;
-const tailwind_config_1 = __importDefault(require("../../tailwind.config"));
-const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const handler = (alpha) => {
-    let alphaHex = "";
+var tailwind_1 = __importDefault(require("../tailwind"));
+var tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+var handler = function (alpha) {
+    var alphaHex = "";
     if (alpha) {
@@ -17,17 +17,17 @@ (0, tiny_invariant_1.default)(alpha > 0 && alpha <= 1, "Alpha channel must be between 0 and 1");
     return {
-        get(_target, prop) {
-            const colors = tailwind_config_1.default.theme.colors;
-            const [name, weight] = prop.toString().toLowerCase().split("-");
+        get: function (_target, prop) {
+            var colors = tailwind_1.default.theme.colors;
+            var _a = prop.toString().toLowerCase().split("-"), name = _a[0], weight = _a[1];
             if (colors && Object.hasOwn(colors, name)) {
                 if (typeof colors[name] === "string") {
-                    return `${colors[name]}${alphaHex}`;
+                    return "".concat(colors[name]).concat(alphaHex);
                 }
                 if (!weight) {
-                    return `${colors[name][500]}${alphaHex}`;
+                    return "".concat(colors[name][500]).concat(alphaHex);
                 }
                 if (Object.hasOwn(colors[name], weight)) {
-                    return `${colors[name][weight]}${alphaHex}`;
+                    return "".concat(colors[name][weight]).concat(alphaHex);
                 }
             }
-            return `#ffffff${alphaHex}`;
+            return "#ffffff".concat(alphaHex);
         },
@@ -37,4 +37,4 @@ };
 exports.Colors = new Proxy({}, handler());
-const ColorsWithAlpha = (alpha) => new Proxy({}, handler(alpha));
+var ColorsWithAlpha = function (alpha) { return new Proxy({}, handler(alpha)); };
 exports.ColorsWithAlpha = ColorsWithAlpha;
 //# sourceMappingURL=index.js.map

dist/stories/Input/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,10 +29,10 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.Input = exports.inputVariants = void 0;
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
-const class_variance_authority_1 = require("class-variance-authority");
-const react_2 = __importDefault(require("react"));
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = require("react");
+var class_variance_authority_1 = require("class-variance-authority");
+var react_2 = __importDefault(require("react"));
 exports.inputVariants = (0, class_variance_authority_1.cva)((0, clsx_1.default)("h-9 px-3 py-1", "text-ellipsis text-sm text-primary", "bg-transparent", "disabled:cursor-not-allowed", "placeholder:text-muted-foreground"), {
     variants: {
         variant: {
-            default: (0, clsx_1.default)("border border-secondary rounded-md", "focus-visible:border-secondary-active focus-visible:outline-none"),
+            default: (0, clsx_1.default)("border border-primary rounded-md", "focus-visible:border-secondary-active focus-visible:outline-none"),
             borderless: (0, clsx_1.default)("focus-visible:outline-none"),
@@ -23,6 +45,7 @@ },
 });
-exports.Input = (0, react_1.forwardRef)(({ className, variant, ...props }, ref) => {
-    return (react_2.default.createElement("input", { className: (0, exports.inputVariants)({ variant, className }), ref: ref, ...props }));
+exports.Input = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, props = __rest(_a, ["className", "variant"]);
+    return (react_2.default.createElement("input", __assign({ className: (0, exports.inputVariants)({ variant: variant, className: className }), ref: ref }, props)));
 });
 exports.Input.displayName = "Input";
 //# sourceMappingURL=index.js.map

dist/stories/Label/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,6 +29,6 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.Label = exports.labelVariants = void 0;
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
-const class_variance_authority_1 = require("class-variance-authority");
-const react_2 = __importDefault(require("react"));
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = require("react");
+var class_variance_authority_1 = require("class-variance-authority");
+var react_2 = __importDefault(require("react"));
 exports.labelVariants = (0, class_variance_authority_1.cva)((0, clsx_1.default)("text-primary"), {
@@ -24,6 +46,7 @@ variants: {
 });
-exports.Label = (0, react_1.forwardRef)(({ className, variant, children, ...props }, ref) => {
-    return (react_2.default.createElement("span", { className: (0, exports.labelVariants)({ variant, className }), ref: ref, ...props }, children));
+exports.Label = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["className", "variant", "children"]);
+    return (react_2.default.createElement("span", __assign({ className: (0, exports.labelVariants)({ variant: variant, className: className }), ref: ref }, props), children));
 });
 exports.Label.displayName = "Input";
 //# sourceMappingURL=index.js.map

dist/stories/Separator/index.js

 "use client";
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -26,2 +37,13 @@ if (k2 === undefined) k2 = k;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -32,7 +54,10 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.Separator = void 0;
-const react_separator_1 = require("@radix-ui/react-separator");
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = __importStar(require("react"));
-exports.Separator = (0, react_1.forwardRef)(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (react_1.default.createElement(react_separator_1.Root, { ref: ref, decorative: decorative, orientation: orientation, className: (0, clsx_1.default)("shrink-0 bg-surface", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
+var react_separator_1 = require("@radix-ui/react-separator");
+var clsx_1 = __importDefault(require("clsx"));
+var react_1 = __importStar(require("react"));
+exports.Separator = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.decorative, decorative = _c === void 0 ? true : _c, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (react_1.default.createElement(react_separator_1.Root, __assign({ ref: ref, decorative: decorative, orientation: orientation, className: (0, clsx_1.default)("shrink-0 bg-surface", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className) }, props)));
+});
 exports.Separator.displayName = react_separator_1.Root.displayName;
 //# sourceMappingURL=index.js.map

dist/stories/Skeleton/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,8 +29,9 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.Skeleton = void 0;
-const clsx_1 = require("clsx");
-const react_1 = __importDefault(require("react"));
-function Skeleton({ className, ...props }) {
-    return (react_1.default.createElement("div", { className: (0, clsx_1.clsx)("bg-disabled animate-pulse opacity-0 rounded-md", className), ...props }));
+var clsx_1 = require("clsx");
+var react_1 = __importDefault(require("react"));
+function Skeleton(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (react_1.default.createElement("div", __assign({ className: (0, clsx_1.clsx)("bg-disabled animate-pulse opacity-0 rounded-md", className) }, props)));
 }
 exports.Skeleton = Skeleton;
 //# sourceMappingURL=index.js.map

dist/stories/Typography/plugin.js

@@ -7,12 +7,16 @@ "use strict";
 exports.typographyUtilities = void 0;
-const plugin_1 = __importDefault(require("tailwindcss/plugin"));
+var plugin_1 = __importDefault(require("tailwindcss/plugin"));
 function typographyUtilities(theme) {
-    const fontSizes = theme.fontSize ?? {};
-    const fontWeight = theme.fontWeight ?? {};
-    const fontFamily = theme.fontFamily ?? {};
+    var _a, _b, _c;
+    var fontSizes = (_a = theme.fontSize) !== null && _a !== void 0 ? _a : {};
+    var fontWeight = (_b = theme.fontWeight) !== null && _b !== void 0 ? _b : {};
+    var fontFamily = (_c = theme.fontFamily) !== null && _c !== void 0 ? _c : {};
     fontWeight["mono"] = "400";
-    const fontTypes = Object.keys(fontSizes).flatMap((size) => Object.keys(fontWeight).map((weight) => [size, weight]));
-    const utilities = {};
-    for (const [size, weight] of fontTypes) {
-        const key = `text-${size}-${weight}`;
+    var fontTypes = Object.keys(fontSizes).flatMap(function (size) {
+        return Object.keys(fontWeight).map(function (weight) { return [size, weight]; });
+    });
+    var utilities = {};
+    for (var _i = 0, fontTypes_1 = fontTypes; _i < fontTypes_1.length; _i++) {
+        var _d = fontTypes_1[_i], size = _d[0], weight = _d[1];
+        var key = "text-".concat(size, "-").concat(weight);
         utilities[key] = {
@@ -28,6 +32,7 @@ fontSize: fontSizes[size][0],
 exports.typographyUtilities = typographyUtilities;
-exports.default = (0, plugin_1.default)(function ({ addUtilities, theme }) {
-    const utilities = typographyUtilities(theme(""));
+exports.default = (0, plugin_1.default)(function (_a) {
+    var addUtilities = _a.addUtilities, theme = _a.theme;
+    var utilities = typographyUtilities(theme(""));
     addUtilities(utilities);
 });
 //# sourceMappingURL=plugin.js.map

dist/tailwind.config.d.ts

@@ -1,161 +0,2 @@
-declare const _default: {
-    content: string[];
-    theme: {
-        colors: {
-            gold: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            blue: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            green: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            red: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            slate: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            dark: {
-                800: string;
-                900: string;
-            };
-            white: string;
-            black: string;
-            transparent: string;
-        };
-        fontSize: {
-            xxs: [string, string];
-            xs: [string, string];
-            sm: [string, string];
-            base: [string, string];
-            xl: [string, string];
-            "2xl": [string, string];
-            "3xl": [string, string];
-        };
-        fontWeight: {
-            regular: string;
-            medium: string;
-            semibold: string;
-        };
-        fontFamily: {
-            sans: [string, ...string[]];
-            mono: [string, ...string[]];
-        };
-        extend: {
-            textColor: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                quarternary: string;
-                inverse: string;
-                link: string;
-                "link-hover": string;
-                error: string;
-                success: string;
-                warning: string;
-            };
-            fill: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                quarternary: string;
-                inverse: string;
-                link: string;
-                "link-hover": string;
-                error: string;
-                success: string;
-                warning: string;
-            };
-            borderColor: {
-                primary: string;
-                focus: string;
-                "secondary-active": string;
-                error: string;
-                success: string;
-                warning: string;
-            };
-            ringColor: {
-                primary: string;
-                focus: string;
-                "secondary-active": string;
-                error: string;
-                success: string;
-                warning: string;
-            };
-            outlineColor: {
-                primary: string;
-                focus: string;
-                "secondary-active": string;
-                error: string;
-                success: string;
-                warning: string;
-            };
-            backgroundColor: {
-                default: string;
-                surface: string;
-                "surface-hover": string;
-                disabled: string;
-            };
-            backgroundImage: {
-                primary: string;
-                "primary-hover": string;
-                secondary: string;
-                "secondary-hover": string;
-                destructive: string;
-                "destructive-hover": string;
-            };
-        };
-    };
-    plugins: {
-        handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config>;
-    }[];
-};
-export = _default;
+import config from "./stories/tailwind";
+export = config;

dist/tailwind.config.js

@@ -5,149 +5,4 @@ "use strict";
 };
-const defaultTheme_1 = require("tailwindcss/defaultTheme");
-const plugin_1 = __importDefault(require("./stories/Typography/plugin"));
-const colors = {
-    gold: {
-        50: "#FEF7E6",
-        100: "#FCEFCF",
-        200: "#FAE09E",
-        300: "#F7D16E",
-        400: "#F5C13D",
-        500: "#F0B10D",
-        600: "#CC9300",
-        700: "#996E00",
-        800: "#664900",
-        900: "#332500",
-    },
-    blue: {
-        50: "#E5E9FF",
-        100: "#CCD5FF",
-        200: "#99AAFF",
-        300: "#6E85F7",
-        400: "#5670F6",
-        500: "#4755EB",
-        600: "#3340CC",
-        700: "#2933A3",
-        800: "#1F277A",
-        900: "#141952",
-    },
-    green: {
-        50: "#E8FCF6",
-        100: "#D2F9ED",
-        200: "#A6F2DB",
-        300: "#79ECC9",
-        400: "#36E2AE",
-        500: "#00CC8F",
-        600: "#00B27D",
-        700: "#00825B",
-        800: "#006446",
-        900: "#003324",
-    },
-    red: {
-        50: "#FDE7EB",
-        100: "#FBD0D7",
-        200: "#F9B8C3",
-        300: "#F5899A",
-        400: "#F37186",
-        500: "#F04260",
-        600: "#E21235",
-        700: "#BD0F2D",
-        800: "#750A1B",
-        900: "#470611",
-    },
-    slate: {
-        50: "#EEEFF6",
-        100: "#DEDFED",
-        200: "#BEC1DC",
-        300: "#9CA0C9",
-        400: "#7C81B8",
-        500: "#60659F",
-        600: "#4D5180",
-        700: "#393D60",
-        800: "#303350",
-        900: "#1D1F30",
-    },
-    dark: {
-        800: "#111545",
-        900: "#0E1139",
-    },
-    white: "#FFFFFF",
-    black: "#000000",
-    transparent: "transparent",
-};
-const borderRingOutline = {
-    primary: colors.blue[800],
-    focus: colors.slate[400],
-    "secondary-active": colors.blue[600],
-    error: colors.red[500],
-    success: colors.green[500],
-    warning: colors.gold[300],
-};
-module.exports = {
-    content: ["./stories/**/*.{js,ts,jsx,tsx,mdx}"],
-    theme: {
-        colors,
-        fontSize: {
-            xxs: ["0.625rem", "0.75rem"],
-            xs: ["0.75rem", "1rem"],
-            sm: ["0.875rem", "1.25rem"],
-            base: ["1rem", "1.5rem"],
-            xl: ["1.25rem", "1.75rem"],
-            "2xl": ["1.5rem", "2rem"],
-            "3xl": ["1.875rem", "2.25rem"],
-        },
-        fontWeight: {
-            regular: "400",
-            medium: "500",
-            semibold: "600",
-        },
-        fontFamily: {
-            sans: ["SuisseIntl", ...defaultTheme_1.fontFamily.sans],
-            mono: ["SuisseIntlMono", ...defaultTheme_1.fontFamily.mono],
-        },
-        extend: {
-            textColor: {
-                primary: colors.slate[50],
-                secondary: colors.slate[300],
-                tertiary: colors.slate[400],
-                quarternary: colors.slate[500],
-                inverse: colors.dark[900],
-                link: colors.blue[200],
-                "link-hover": colors.blue[100],
-                error: colors.red[400],
-                success: colors.green[400],
-                warning: colors.gold[300],
-            },
-            fill: {
-                primary: colors.slate[50],
-                secondary: colors.slate[300],
-                tertiary: colors.slate[400],
-                quarternary: colors.slate[500],
-                inverse: colors.dark[900],
-                link: colors.blue[200],
-                "link-hover": colors.blue[100],
-                error: colors.red[400],
-                success: colors.green[400],
-                warning: colors.gold[300],
-            },
-            borderColor: borderRingOutline,
-            ringColor: borderRingOutline,
-            outlineColor: borderRingOutline,
-            backgroundColor: {
-                default: colors.dark[900],
-                surface: colors.dark[800],
-                "surface-hover": colors.blue[900],
-                disabled: colors.slate[500],
-            },
-            backgroundImage: {
-                primary: `linear-gradient(180deg, ${colors.gold[300]}, #F6C955)`,
-                "primary-hover": `linear-gradient(180deg, #F8D67D, ${colors.gold[300]})`,
-                secondary: `linear-gradient(180deg, ${colors.blue[800]}, #1D2472)`,
-                "secondary-hover": `linear-gradient(180deg, #222B87, ${colors.blue[800]})`,
-                destructive: `linear-gradient(180deg, ${colors.red[400]}, #F25A73)`,
-                "destructive-hover": `linear-gradient(180deg, #F58093, ${colors.red[400]})`,
-            },
-        },
-    },
-    plugins: [plugin_1.default],
-};
+var tailwind_1 = __importDefault(require("./stories/tailwind"));
+module.exports = tailwind_1.default;
 //# sourceMappingURL=tailwind.config.js.map

package.json

 {
   "name": "@orca-so/design-system",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Orca Design System",
@@ -23,5 +23,7 @@ "main": "dist/index.js",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "react-icons": "^5.0.1",
+    "tailwindcss-animate": "^1.0.7",
     "tiny-invariant": "^1.3.1"
@@ -42,3 +44,2 @@ },
     "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-themes": "^7.6.5",
     "@storybook/blocks": "^7.6.5",
@@ -45,0 +46,0 @@ "@storybook/nextjs": "^7.6.5",

README.md

@@ -27,3 +27,3 @@ # Orca Design System
   presets: [
-    require('@orca-so/design-system/tailwind.config.js')
+    require('@orca-so/design-system/dist/tailwind.config.js')
   ],
@@ -30,0 +30,0 @@ // ...

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82318

increased by69.36%

Dev dependency count

34

decreased by-2.86%

Number of package files

51

increased by41.67%

Lines of code

1263

increased by75.91%

Worsened metrics

Dependency count

11

increased by22.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@radix-ui/react-toast@^1.1.5

• + Addedtailwindcss-animate@^1.0.7

• + Added@radix-ui/react-dismissable-layer@1.1.0(transitive)

• + Added@radix-ui/react-portal@1.1.1(transitive)

• + Added@radix-ui/react-toast@1.2.1(transitive)

• + Added@radix-ui/react-use-escape-keydown@1.1.0(transitive)

• + Added@radix-ui/react-visually-hidden@1.1.0(transitive)

• + Addedtailwindcss-animate@1.0.7(transitive)