diff --git a/.vscode/settings.json b/.vscode/settings.json index 91d9aa5c9..b676052a7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,11 @@ { "todo-tree.tree.showBadges": true, - "css.customData": [ - ".vscode/tailwind.json" - ], + "css.customData": [".vscode/tailwind.json"], + "workbench.colorCustomizations": { + "titleBar.activeBackground": "#007fff", + "titleBar.activeForeground": "#ffffff", + "titleBar.inactiveBackground": "#007fff", + "titleBar.inactiveForeground": "#ffffff" + }, "typescript.tsdk": "node_modules\\typescript\\lib" } diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md index 6d5f35d0c..25e516b9c 100644 --- a/apps/docs/CHANGELOG.md +++ b/apps/docs/CHANGELOG.md @@ -1,5 +1,12 @@ # hawa-docs +## 0.0.23 + +### Patch Changes + +- Updated dependencies + - @sikka/hawa@0.28.0 + ## 0.0.22 ### Patch Changes diff --git a/apps/docs/package.json b/apps/docs/package.json index 347a5d1be..3ce80e537 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -1,6 +1,6 @@ { "name": "hawa-docs", - "version": "0.0.22", + "version": "0.0.23", "private": true, "scripts": { "dev": "next dev -p 3001", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f0712a526..ed2d73d1e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @sikka/hawa +## 0.28.0 + +### Minor Changes + +- Adds new variants (`underlined` and `underlined_tabs`) to `Tabs` +- Initial integration of 'tailwind-variants' package + ## 0.27.24 ### Patch Changes diff --git a/packages/components/elements/tabs/Tabs.tsx b/packages/components/elements/tabs/Tabs.tsx index bc9734e66..44ffe88d0 100644 --- a/packages/components/elements/tabs/Tabs.tsx +++ b/packages/components/elements/tabs/Tabs.tsx @@ -1,54 +1,137 @@ import * as React from "react"; -import { OrientationType } from "@_types/commonTypes"; import * as TabsPrimitive from "@radix-ui/react-tabs"; - import { cn } from "@util/index"; +import { VariantProps, cva } from "class-variance-authority"; +import { tv } from "tailwind-variants"; + +import { OrientationType } from "@_types/commonTypes"; + import { Chip, ChipTypes } from "../chip/Chip"; +const tabsListVariant = tv({ + base: "", + variants: { + variant: { + default: + "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10", + underlined: + "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10", + underlined_tabs: + "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground" + }, + orientation: { + horizontal: "", + vertical: "" + } + }, + compoundVariants: [ + { + variant: "underlined_tabs", + orientation: "vertical", + class: "hawa-border-e-2 hawa-border-e-primary" + }, + { + variant: "underlined_tabs", + orientation: "horizontal", + class: "hawa-border-b-2 hawa-border-b-primary" + } + ], + defaultVariants: { + variant: "default", + orientation: "horizontal" + } +}); + +const tabsTriggerVariant = tv({ + base: "", + variants: { + variant: { + default: + "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10", + underlined: + "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50", + underlined_tabs: + "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10" + }, + orientation: { + horizontal: "", + vertical: "" + } + }, + compoundVariants: [ + { + variant: "underlined", + orientation: "horizontal", + class: + "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2" + }, + { + variant: "underlined", + orientation: "vertical", + class: + "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2" + }, + { + variant: "underlined_tabs", + orientation: "horizontal", + class: "hawa-rounded-b-none" + }, + { + variant: "underlined_tabs", + orientation: "vertical", + class: "hawa-rounded-e-none" + } + ], + defaultVariants: { + variant: "default", + orientation: "horizontal" + } +}); + +type TabsVariants = "default" | "underlined" | "underlined_tabs"; + const TabsContext = React.createContext<{ orientation?: OrientationType; -}>({ orientation: "vertical" }); + variant?: TabsVariants; +}>({ orientation: "horizontal", variant: "default" }); type TabsRootProps = React.ComponentPropsWithoutRef< typeof TabsPrimitive.Root -> & { orientation?: "vertical" | "horizontal" }; +> & { + variant?: TabsVariants; +}; const Tabs = React.forwardRef< React.ElementRef, TabsRootProps ->( - ( - { className, orientation = "vertical" as OrientationType, ...props }, - ref - ) => ( - - - {props.children} - - - ) -); +>(({ className, orientation, variant = "default", ...props }, ref) => ( + + + {props.children} + + +)); Tabs.displayName = TabsPrimitive.Root.displayName; const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { - const { orientation } = React.useContext(TabsContext); + const { orientation, variant } = React.useContext(TabsContext); return ( , TabsTriggerProps >(({ className, chipProps, ...props }, ref) => { + const { orientation, variant } = React.useContext(TabsContext); return ( {props.children} diff --git a/packages/components/package.json b/packages/components/package.json index 7b61672a0..cdd6d7d0e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@sikka/hawa", - "version": "0.27.24", + "version": "0.28.0", "description": "Modern UI Kit made with Tailwind", "author": { "name": "Sikka Software", @@ -91,6 +91,7 @@ "react-select": "^5.8.0", "signature_pad": "^4.1.7", "tailwind-merge": "^2.2.1", + "tailwind-variants": "^0.1.20", "trim-canvas": "^0.1.2", "zod": "^3.22.4" }, diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md index a9d40daef..c306847dc 100644 --- a/packages/storybook/CHANGELOG.md +++ b/packages/storybook/CHANGELOG.md @@ -1,5 +1,12 @@ # hawa-storybook +## 0.26.40 + +### Patch Changes + +- Updated dependencies + - @sikka/hawa@0.28.0 + ## 0.26.39 ### Patch Changes diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 5779a4c7a..87c8e81ef 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -1,6 +1,6 @@ { "name": "hawa-storybook", - "version": "0.26.39", + "version": "0.26.40", "description": "Modern UI Kit made with Tailwind", "author": { "name": "Sikka Software", diff --git a/packages/storybook/stories/ElementsStories/Tabs.stories.tsx b/packages/storybook/stories/ElementsStories/Tabs.stories.tsx index 0a859e465..384a58d4e 100644 --- a/packages/storybook/stories/ElementsStories/Tabs.stories.tsx +++ b/packages/storybook/stories/ElementsStories/Tabs.stories.tsx @@ -8,6 +8,7 @@ import { TabsList, TabsTrigger } from "@sikka/hawa/elements/tabs"; +import { OrientationType } from "@sikka/hawa/types/commonTypes"; import { setLocale, t } from "../../translations/i18n"; @@ -25,7 +26,7 @@ export const Default: Story = { setLocale(locale); return ( - + {t("account")} {t("password")} @@ -70,6 +71,9 @@ export const Default: Story = { ); + }, + args: { + variant: "default" } }; export const Vertical: Story = { @@ -79,7 +83,12 @@ export const Vertical: Story = { const direction = locale === "ar" ? "rtl" : "ltr"; return ( - + {t("account")} {t("password")} @@ -114,5 +123,8 @@ export const Vertical: Story = { ); + }, + args: { + variant: "default" } }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 648da98ae..e5e6f7a2c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -396,6 +396,9 @@ importers: tailwind-merge: specifier: ^2.2.1 version: 2.2.1 + tailwind-variants: + specifier: ^0.1.20 + version: 0.1.20(tailwindcss@3.4.1) trim-canvas: specifier: ^0.1.2 version: 0.1.2 @@ -16562,6 +16565,16 @@ packages: '@babel/runtime': 7.23.8 dev: false + /tailwind-variants@0.1.20(tailwindcss@3.4.1): + resolution: {integrity: sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==} + engines: {node: '>=16.x', pnpm: '>=7.x'} + peerDependencies: + tailwindcss: '*' + dependencies: + tailwind-merge: 1.14.0 + tailwindcss: 3.4.1 + dev: false + /tailwindcss-animate@1.0.7(tailwindcss@3.4.1): resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: