chore: update QA workflow by removing Prettier steps and adjusting permissions for continuous release

* feat(tabs): add hideSeparator prop to remove tab separators

* docs(tabs): update icon metadata for Tabs component

.github/workflows/QA.yaml

@@ -4,6 +4,8 @@ on:
   pull_request:
     branches:
       - canary
+      - v3
+      - 'beta-*'
 
 jobs:
   build:
@@ -19,18 +21,6 @@ jobs:
       - name: Build packages
         run: pnpm build
 
-  tests:
-    name: Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v4
-
-      - name: Install
-        uses: ./.github/common-actions/install
-
-      - name: Run tests
-        run: pnpm test
 
   eslint:
     name: ESLint
@@ -45,18 +35,6 @@ jobs:
       - name: Run ESLint
         run: pnpm lint
 
-  prettier:
-    name: Prettier
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v4
-
-      - name: Install
-        uses: ./.github/common-actions/install
-
-      - name: Run prettier
-        run: pnpm format:check
 
   types:
     name: TypeScript
@@ -75,9 +53,14 @@ jobs:
     name: Continuous Release
     if: github.repository == 'heroui-inc/heroui'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -86,4 +69,4 @@ jobs:
         run: pnpm build
 
       - name: Release
-        run: pnpx pkg-pr-new publish --compact --pnpm './packages/components/*' './packages/core/*' './packages/hooks/*' './packages/utilities/*'
+        run: pnpx pkg-pr-new publish --pnpm './packages/styles' './packages/react'

.github/workflows/commitlint.yml

@@ -1,43 +0,0 @@
-name: Commitlint
-
-on:
-  push:
-    branches: [main, canary, v3]
-  pull_request:
-    branches: [main, canary, v3]
-
-permissions:
-  contents: read
-  pull-requests: read
-
-jobs:
-  commitlint:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout codebase
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Install dependencies
-        uses: ./.github/common-actions/install
-
-      - name: Print versions
-        run: |
-          git --version
-          node --version
-          pnpm --version
-          pnpm commitlint --version
-
-      - name: Run commitlint
-        id: run_commitlint
-        uses: wagoid/commitlint-github-action@v6
-        env:
-          NODE_PATH: ${{ github.workspace }}/node_modules
-        with:
-          configFile: commitlint.config.mjs
-
-      - name: Show outputs
-        if: ${{ always() }}
-        run: echo ${{ toJSON(steps.run_commitlint.outputs.results) }}

apps/docs/content/docs/components/tabs.mdx

@@ -1,6 +1,7 @@
 ---
 title: Tabs
 description: Tabs organize content into multiple sections and allow users to navigate between them.
+icon: updated
 links:
   rac: Tabs
   source: tabs/tabs.tsx
@@ -144,6 +145,7 @@ The component supports both CSS pseudo-classes and data attributes:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Tab layout orientation |
+| `hideSeparator` | `boolean` | `false` | Hide separator lines between tabs |
 | `selectedKey` | `string` | - | Controlled selected tab key |
 | `defaultSelectedKey` | `string` | - | Default selected tab key |
 | `onSelectionChange` | `(key: Key) => void` | - | Selection change handler |

apps/docs/src/demos/index.ts

@@ -834,6 +834,10 @@ export const demos: Record<string, DemoItem> = {
     component: TabsDemos.CustomStyles,
     file: "tabs/custom-styles.tsx",
   },
+  "tabs-without-separator": {
+    component: TabsDemos.WithoutSeparator,
+    file: "tabs/without-separator.tsx",
+  },
   // TextArea demos
   "textarea-basic": {
     component: TextAreaDemos.Basic,

apps/docs/src/demos/tabs/index.ts

@@ -2,3 +2,4 @@ export {Basic} from "./basic";
 export {Vertical} from "./vertical";
 export {Disabled} from "./disabled";
 export {CustomStyles} from "./custom-styles";
+export {WithoutSeparator} from "./without-separator";

apps/docs/src/demos/tabs/without-separator.tsx

@@ -0,0 +1,33 @@
+import {Tabs} from "@heroui/react";
+
+export function WithoutSeparator() {
+  return (
+    <Tabs hideSeparator className="w-full max-w-md">
+      <Tabs.ListContainer>
+        <Tabs.List aria-label="Options">
+          <Tabs.Tab id="overview">
+            Overview
+            <Tabs.Indicator />
+          </Tabs.Tab>
+          <Tabs.Tab id="analytics">
+            Analytics
+            <Tabs.Indicator />
+          </Tabs.Tab>
+          <Tabs.Tab id="reports">
+            Reports
+            <Tabs.Indicator />
+          </Tabs.Tab>
+        </Tabs.List>
+      </Tabs.ListContainer>
+      <Tabs.Panel className="pt-4" id="overview">
+        <p>View your project overview and recent activity.</p>
+      </Tabs.Panel>
+      <Tabs.Panel className="pt-4" id="analytics">
+        <p>Track your metrics and analyze performance data.</p>
+      </Tabs.Panel>
+      <Tabs.Panel className="pt-4" id="reports">
+        <p>Generate and download detailed reports.</p>
+      </Tabs.Panel>
+    </Tabs>
+  );
+}

packages/react/package.json

@@ -37,7 +37,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/heroui-inc/heroui.git",
+    "url": "https://github.com/heroui-inc/heroui.git",
     "directory": "packages/react"
   },
   "bugs": {

packages/react/src/components/tabs/tabs.stories.tsx

@@ -237,6 +237,40 @@ const CustomStyleTemplate = (args: Story["args"]) => {
   );
 };
 
+const WithoutSeparatorTemplate = (args: Story["args"]) => {
+  return (
+    <div className="w-[600px]">
+      <Tabs {...args} hideSeparator>
+        <Tabs.ListContainer>
+          <Tabs.List aria-label="Options">
+            <Tabs.Tab id="overview">
+              Overview
+              <Tabs.Indicator />
+            </Tabs.Tab>
+            <Tabs.Tab id="analytics">
+              Analytics
+              <Tabs.Indicator />
+            </Tabs.Tab>
+            <Tabs.Tab id="reports">
+              Reports
+              <Tabs.Indicator />
+            </Tabs.Tab>
+          </Tabs.List>
+        </Tabs.ListContainer>
+        <Tabs.Panel className="pt-4" id="overview">
+          <p>View your project overview and recent activity.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className="pt-4" id="analytics">
+          <p>Track your metrics and analyze performance data.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className="pt-4" id="reports">
+          <p>Generate and download detailed reports.</p>
+        </Tabs.Panel>
+      </Tabs>
+    </div>
+  );
+};
+
 const Showcase1Template = (args: Story["args"]) => {
   const DEFAULT_ZOOM = 200;
   const [selectedZoom, setSelectedZoom] = React.useState<Key>(DEFAULT_ZOOM);
@@ -371,6 +405,13 @@ export const WithCustomStyle: Story = {
   render: CustomStyleTemplate,
 };
 
+export const WithoutSeparator: Story = {
+  args: {
+    children: null,
+  },
+  render: WithoutSeparatorTemplate,
+};
+
 export const Showcase1: Story = {
   args: {
     children: null,

packages/react/src/components/tabs/tabs.tsx

@@ -20,8 +20,9 @@ import {tabsVariants} from "./tabs.styles";
  * Tabs Context
  * -----------------------------------------------------------------------------------------------*/
 type TabsContext = {
-  slots?: ReturnType<typeof tabsVariants>;
+  hideSeparator?: boolean;
   orientation?: "horizontal" | "vertical";
+  slots?: ReturnType<typeof tabsVariants>;
 };
 
 const TabsContext = createContext<TabsContext>({});
@@ -32,13 +33,20 @@ const TabsContext = createContext<TabsContext>({});
 interface TabsRootProps extends ComponentPropsWithRef<typeof TabsPrimitive>, TabsVariants {
   children: React.ReactNode;
   className?: string;
+  hideSeparator?: boolean;
 }
 
-const TabsRoot = ({children, className, orientation = "horizontal", ...props}: TabsRootProps) => {
+const TabsRoot = ({
+  children,
+  className,
+  hideSeparator = false,
+  orientation = "horizontal",
+  ...props
+}: TabsRootProps) => {
   const slots = React.useMemo(() => tabsVariants(), []);
 
   return (
-    <TabsContext value={{slots, orientation}}>
+    <TabsContext value={{hideSeparator, orientation, slots}}>
       <TabsPrimitive
         {...props}
         className={composeTwRenderProps(className, slots.base())}
@@ -81,12 +89,13 @@ interface TabListProps extends ComponentPropsWithRef<typeof TabListPrimitive<obj
 }
 
 const TabList = ({children, className, ...props}: TabListProps) => {
-  const {slots} = useContext(TabsContext);
+  const {hideSeparator, slots} = useContext(TabsContext);
 
   return (
     <TabListPrimitive
       {...props}
       className={composeTwRenderProps(className, slots?.tabList())}
+      data-hide-separator={hideSeparator ? "true" : undefined}
       data-slot="tabs-list"
     >
       {children}

packages/styles/components/tabs.css

@@ -104,6 +104,11 @@
     opacity: 0;
   }
 
+  /* Hide separator when hideSeparator prop is set */
+  [data-hide-separator="true"] &:not(:first-child):before {
+    display: none;
+  }
+
   /* Disabled state */
   &:disabled,
   &[data-disabled],

packages/styles/package.json

@@ -4,6 +4,11 @@
   "description": "HeroUI core styles and Tailwind plugin",
   "author": "HeroUI <support@heroui.com>",
   "homepage": "https://heroui.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heroui-inc/heroui.git",
+    "directory": "packages/styles"
+  },
   "license": "MIT",
   "type": "module",
   "main": "./index.css",