@uxf/ui 1.0.0-beta.69 → 1.0.0-beta.70

package/css/button.css

@@ -100,7 +100,7 @@
         }
 
         :root .dark & {
-            @apply before:border-gray-700 hover:bg-gray-700 hover:before:border-gray-300 focus-visible:ring-primary-500
+            @apply before:border-gray-300 hover:bg-white/10 focus-visible:ring-primary-500
                 focus-visible:ring-offset-gray-900;
 
             &.is-disabled {

package/css/chip.css

@@ -11,7 +11,7 @@
         }
 
         :root .dark & {
-            @apply text-white bg-success-700;
+            @apply text-white bg-success-600;
         }
     }
 
@@ -21,7 +21,7 @@
         }
 
         :root .dark & {
-            @apply text-white bg-warning-700;
+            @apply text-white bg-warning-600;
         }
     }
 
@@ -31,7 +31,7 @@
         }
 
         :root .dark & {
-            @apply text-white bg-error-700;
+            @apply text-white bg-error-600;
         }
     }
 }

package/css/dropdown.css

@@ -17,4 +17,8 @@
             @apply bg-primary-500 text-white;
         }
     }
+
+    &__items {
+        @apply absolute flex flex-col border border-black bg-white;
+    }
 }

package/css/list-item.css

@@ -6,7 +6,8 @@
         @apply w-full;
     }
 
-    &__end-elements-wrapper, &__end-icon-wrapper {
+    &__end-elements-wrapper,
+    &__end-icon-wrapper {
         @apply shrink-0;
     }
 

package/dropdown/dropdown.d.ts

@@ -1,8 +1,9 @@
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
-interface ItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+export interface ItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
 }
 declare type ItemsProps = HTMLAttributes<HTMLDivElement>;
+export declare type ItemsTypeProps = HTMLDivElement;
 export declare const Dropdown: {
     Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLAnchorElement>>;
     Items: React.ForwardRefExoticComponent<ItemsProps & React.RefAttributes<HTMLDivElement>>;

package/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: {
+        Item: React.ForwardRefExoticComponent<import("./dropdown").ItemProps & React.RefAttributes<HTMLAnchorElement>>;
+        Items: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    };
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/dropdown/dropdown.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = require("@headlessui/react");
+const react_2 = __importDefault(require("react"));
+const index_1 = require("./index");
+const button_1 = require("../button");
+const classes_1 = require("@uxf/core/constants/classes");
+exports.default = {
+    title: "UI/Dropdown",
+    component: index_1.Dropdown,
+};
+const testDropdownItems = [
+    { id: 1, title: "Test 1" },
+    { id: 2, title: "Test 2" },
+    { id: 3, title: "Test 3" },
+];
+function Default() {
+    const storyDropdown = (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(react_1.Menu, { as: "div", className: "relative" },
+            react_2.default.createElement(react_1.Menu.Button, { as: button_1.Button, title: "Test" }, "Click me"),
+            react_2.default.createElement(react_1.Menu.Items, { as: index_1.Dropdown.Items }, testDropdownItems.map((item) => (react_2.default.createElement(react_1.Menu.Item, { key: item.id }, ({ active }) => (react_2.default.createElement(index_1.Dropdown.Item, { className: `first-letter:uppercase ${active ? classes_1.CLASSES.IS_ACTIVE : ""}` }, item.title)))))))));
+    return (react_2.default.createElement("div", { className: "flex" },
+        react_2.default.createElement("div", { className: "light grow gap-4 p-4" }, storyDropdown),
+        react_2.default.createElement("div", { className: "dark grow gap-4 bg-gray-900 p-4 text-gray-200" }, storyDropdown)));
+}
+exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.69",
+  "version": "1.0.0-beta.70",
   "description": "",
   "publishConfig": {
     "access": "public"

package/tabs/tabs.d.ts

@@ -1,4 +1,10 @@
-import React, { HTMLAttributes } from "react";
+import React, { FC, HTMLAttributes, ReactNode } from "react";
+export interface TabProps {
+    children: ReactNode;
+    className: string;
+    tabTitle: ReactNode;
+}
+export declare const TabPanel: FC<TabProps>;
 export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     defaultIndex?: number;
     onChange?: (index: number) => void;

package/tabs/tabs.js

@@ -23,13 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
+exports.Tabs = exports.TabPanel = void 0;
 const react_1 = require("@headlessui/react");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_2 = __importStar(require("react"));
 const classes_1 = require("@uxf/core/constants/classes");
 const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
+const TabPanel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
+exports.TabPanel = TabPanel;
 exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
     var _a, _b;
     const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
@@ -51,8 +53,8 @@ exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
     if (react_2.Children.count(props.children) === 0) {
         return null;
     }
-    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
-    const tabs = tabPanels.map((c) => c.props.title);
+    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.tabTitle);
+    const tabs = tabPanels.map((c) => c.props.tabTitle);
     return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
         react_2.default.createElement(react_1.Tab.List, null,
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`) },

package/tabs/tabs.stories.js

@@ -16,31 +16,31 @@ function Default() {
             react_1.default.createElement("div", null,
                 react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
                 react_1.default.createElement(tabs_1.Tabs, null,
-                    react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                    react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                    react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                    react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
             react_1.default.createElement("div", null,
                 react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
                 react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
-                    react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                    react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                    react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                    react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
         react_1.default.createElement("div", { className: "w-[600px]" },
             react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default grow"),
             react_1.default.createElement(tabs_1.Tabs, { grow: true },
-                react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
         react_1.default.createElement("div", { className: "w-[600px]" },
             react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented grow"),
             react_1.default.createElement(tabs_1.Tabs, { variant: "segmented", grow: true },
-                react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
-                react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
-                react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
-                react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testTabs),
         react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testTabs)));