@turk.net/mui 3.0.8 → 3.0.10

package/DESIGN_RULES.md

@@ -37,7 +37,8 @@ Font weights: `400` (Regular), `500` (Medium), `600` (Semibold), `700` (Bold).
 
 | Context | Variant | Weight |
 |---------|---------|--------|
-| Page title | `display.lg.bold` or `display.md.semibold` | 600-700 |
+| Page title (ana sayfa başlığı) | `display.lg.bold` or `display.md.semibold` | 600-700 |
+| Page title (sayfa içi başlık) | `text.xl.medium` or `display.xs.bold` | 500-700 |
 | Section header | `text.lg.medium` or `text.md.semibold` | 500-600 |
 | Body text | `text.md.regular` or `text.sm.regular` | 400 |
 | Table header | `text.xs.medium` | 500 |
@@ -46,6 +47,7 @@ Font weights: `400` (Regular), `500` (Medium), `600` (Semibold), `700` (Bold).
 | Helper/error text | `text.xs.regular` | 400 |
 | Button text | `text.sm.medium` | 500 |
 | Chip/Badge text | `text.xs.medium` | 500 |
+| Modal title | `text.lg.semibold` | 600 |
 
 ---
 
@@ -87,7 +89,7 @@ Component color props MUST use ONLY the values listed below:
 | `Checkbox` | `primary`, `error` |
 | `Radio` | `primary`, `error` |
 | `Switch` | `primary`, `error` |
-| `Chip` | `primary`, `secondary`, `error` |
+| `Chip` | `primary`, `secondary`, `error`, `danger`, `success`, `informative`, `brand`, `severewarning`, `important` |
 | `Badge` | `default`, `brand`, `success`, `danger`, `severewarning`, `warning`, `important` |
 | `Alert` | `success`, `warning`, `error`, `info` |
 
@@ -180,8 +182,8 @@ function MyButton({ children }: { children: React.ReactNode }) {
 
 | Layout | Import | Use Case |
 |--------|--------|----------|
-| TabBased | `@turknet/onehub/layouts/app/TabBased` | Tab-based application layout |
-| WithSidebar | `@turknet/onehub/layouts/page/WithSidebar` | Sidebar + content layout |
+| TabBased | `@turk.net/mui/layouts/app/TabBased` | Tab-based application layout |
+| Dashboard | Modül başına özel (`src/components/layouts/dashboard/`) | Sidebar + content layout |
 | Empty | Custom per module | No layout (passthrough) |
 | Login | Custom per module | Authentication pages |
 
@@ -191,15 +193,17 @@ function MyButton({ children }: { children: React.ReactNode }) {
 
 ### 5.1 — Icon Source
 
-**MUST import icons from `@turknet/onehub/icons`** (SVG React components) or the project's Tune icon font.
+**MUST import icons from `@turk.net/mui/icons/*`** (SVG React components — tercih edilen) or the project's Tune icon font.
 
 ```typescript
-// ✅ CORRECT — SVG icons
-import { CheckIcon, ChevronDownIcon } from '@turknet/onehub/icons';
+// ✅ CORRECT — SVG icons (tercih edilen)
+import Settings01Icon from "@turk.net/mui/icons/Settings01Icon";
+import ArrowRightIcon from "@turk.net/mui/icons/ArrowRightIcon";
+import SearchMdIcon from "@turk.net/mui/icons/SearchMdIcon";
 
-// ✅ CORRECT — Tune icon font
+// ✅ CORRECT — Tune icon font (eski projelerde)
 import { TuneIcon } from '@/components/ui/icon';
-<TuneIcon name="check" />
+<TuneIcon name="search-md" size="20px" />
 ```
 
 ### 5.2 — Icon Sizing
@@ -278,16 +282,36 @@ import * as yup from 'yup';
 
 ### 9.2 — Form Components
 
-| Field Type | MUI Component |
-|-----------|---------------|
-| Text input | `TextField` |
-| Dropdown | `Select` + `MenuItem` |
-| Autocomplete | `Autocomplete` |
-| Checkbox | `Checkbox` + `FormControlLabel` |
-| Radio group | `RadioGroup` + `Radio` + `FormControlLabel` |
-| Switch | `Switch` + `FormControlLabel` |
-| Date picker | `DatePicker` (`@mui/x-date-pickers`) |
-| Submit | `Button variant="contained" color="primary"` |
+| Field Type | MUI Component | Notes |
+|-----------|---------------|-------|
+| Text input (standard) | `TextField variant="outlined"` | Varsayılan form alanı |
+| Text input (login) | `TextField variant="filled"` | Login/parola sayfaları |
+| Dropdown | `Select` + `MenuItem` | |
+| Autocomplete | `Autocomplete` | |
+| Checkbox | `Checkbox` + `FormControlLabel` | |
+| Radio group | `RadioGroup` + `Radio` + `FormControlLabel` | |
+| Switch | `Switch` + `FormControlLabel` | |
+| Date picker | `DatePicker` (`@mui/x-date-pickers`) | `dayjs` adapter |
+| Search (inline) | `InputBase` + search icon | Tablo üstü arama |
+| Submit | `Button variant="contained" color="primary"` | |
+
+### 9.3 — Formik Configuration
+
+```typescript
+import { useFormik } from "formik";
+import * as Yup from "yup";
+
+const form = useFormik({
+  initialValues: { email: "", password: "" },
+  validationSchema: Yup.object().shape({
+    email: Yup.string().required("Zorunlu alan"),
+    password: Yup.string().required("Zorunlu alan"),
+  }),
+  onSubmit: (values) => { /* ... */ },
+  validateOnChange: false,  // Sadece submit'te validasyon
+  validateOnBlur: false,
+});
+```
 
 ---
 

package/DESIGN_SOURCES.md

@@ -39,6 +39,28 @@
 
 ## Module → Design Mapping
 
+### Activation Module (`tn.onehub.ui.activation`)
+
+| Attribute | Value |
+|-----------|-------|
+| **App Path** | `/` (ana uygulama) |
+| **Theme Package** | `@turk.net/mui` |
+| **Figma Doc** | OneHub Pages & Layouts |
+| **Layout** | `TabBasedLayout` from `@turk.net/mui/layouts/app/TabBased` |
+| **Icon System** | `@turk.net/mui/icons/*` + TuneIcon font |
+| **Key Pages** | Login, My Tasks, Team Tasks, Customers, Performance, Ticket Details, Customer Details |
+
+### Support Qualcomm Module (`tn.onehub.ui.supportqualcomm`)
+
+| Attribute | Value |
+|-----------|-------|
+| **App Path** | `/communication` (örnek) |
+| **Theme Package** | `@turk.net/mui` |
+| **Figma Doc** | OneHub Pages & Layouts |
+| **Layout** | `TabBasedLayout` from `@turk.net/mui/layouts/app/TabBased` |
+| **Icon System** | `@turk.net/mui/icons/*` + TuneIcon font |
+| **Key Pages** | Login, Form Templates, Sent Forms, Operational Feedbacks, Performance Results |
+
 ### Support Module (`tn.onehub.ui.task`)
 
 | Attribute | Value |

package/DESIGN_TOKENS_MAP.md

@@ -249,15 +249,24 @@ sx={{ padding: 8 }}
 
 ## Sizing System
 
-### Component Height Table (from Figma)
+### Component Height Table (from Figma & Gerçek Projeler)
 
 | Component | Height | Notes |
 |-----------|--------|-------|
+| Button (extra-small) | `24px` | ButtonGroup sayfa boyutu seçici |
+| Button (small) | `28px` | Compact action button |
 | Button (medium) | `32px` | Standard action button |
-| Table Header | `40px` | — |
-| Table Row | `56px` | — |
-| Filter Button | `32px` | Same as button |
+| Button (large) | `40px` | Primary CTA |
+| Button (extra-large) | `48px` | Hero/large CTA |
+| Table Header (MUI Table) | `40px` | TextField/Select ile aynı |
+| Table Row (MUI Table) | `56px` | — |
+| Filter Button | `32px` | Same as medium button |
 | Checkbox/Radio | `16px` | Square (width = height) |
+| TabBased Header (top bar) | `56px` | Global header |
+| Sidebar Width | `256px` | Dashboard sidebar |
+| Modal Paper (default) | `800px` width | Desktop modal |
+| Drawer (right panel) | `400px`-`800px` width | Variable |
+| LinearProgress bar | `8px` height | Progress indicator |
 
 ---
 
@@ -268,4 +277,4 @@ sx={{ padding: 8 }}
 | **Family** | Inter (`var(--font-inter)`) |
 | **Weights** | 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold) |
 | **Host Project Responsibility** | MUST define `@font-face` and set `--font-inter` CSS variable |
-| **Package** | Font files NOT distributed by `@turknet/onehub`. Host project must self-host. |
+| **Package** | Font files NOT distributed by `@turk.net/mui`. Host project must self-host (via `next/font/google` — Inter). |

package/ESLINT_DESIGN_RULES.md

@@ -142,7 +142,9 @@ Detects MUI `color` prop values that are not valid for the specific component.
 // ❌ Error
 <Button color="success">Save</Button>      // Valid: primary, secondary, error
 <TextField color="primary" />                // Valid: neutral, brand, danger
-<Chip color="success" />                     // Valid: primary, secondary, error
+<Chip color="success" />                     // Valid: informative, brand, danger, success, severewarning, important, warning
+
+<Chip color="gradient" />                   // ❌ NOT valid
 <Badge color="primary" />                    // Valid: default, brand, success, danger, ...warning, important
 
 // ✅ OK
@@ -254,7 +256,7 @@ These rules require human or AI judgment because context matters.
 | Correct MUI component selected for Figma pattern | Requires visual comparison |
 | Form uses Formik + Yup | Can check imports but can't verify correct usage |
 | Data fetching uses React Query | Can check imports but can't verify correct pattern |
-| Icons from correct source | `@turknet/onehub/icons` vs `@mui/icons-material` can be checked by import source |
+| Icons from correct source | `@turk.net/mui/icons/*` vs `@mui/icons-material` can be checked by import source |
 | Accessibility (labels, keyboard nav) | Needs behavioral/visual verification |
 | Border radius matches element type | Context-dependent |
 | Shadow/elevation level appropriate | Context-dependent |
@@ -342,7 +344,7 @@ design-lint:
       name: Design Compliance Check
       script:
         - yarn lint:design
-        - node node_modules/@turknet/onehub/scripts/verify-design.js src/
+        - node node_modules/@turk.net/mui/scripts/verify-design.js src/
 ```
 
 ---

package/LLM_EXAMPLES.md

@@ -1,6 +1,6 @@
 # LLM Examples — Correct vs. Incorrect Usage
 
-This document demonstrates correct and incorrect usage of Material UI components according to the `@turknet/onehub` theme package rules.
+This document demonstrates correct and incorrect usage of Material UI components according to the `@turk.net/mui` theme package rules.
 
 ---
 
@@ -55,7 +55,7 @@ import { Button } from '@mui/material';
 </Button>
 
 // ✅ Button with icon
-import { DeleteIcon } from '@turknet/onehub/icons';
+import { DeleteIcon } from '@turk.net/mui/icons/DeleteIcon';
 
 <Button 
   variant="contained" 
@@ -197,7 +197,7 @@ import { TextField } from '@mui/material';
 />
 
 // ✅ With icon/adornment
-import { SearchIcon } from '@turknet/onehub/icons';
+import { SearchIcon } from '@turk.net/mui/icons/SearchIcon';
 import { InputAdornment } from '@mui/material';
 
 <TextField
@@ -892,7 +892,7 @@ import {
   ListItemButton,
   Divider
 } from '@mui/material';
-import { StarIcon } from '@turknet/onehub/icons';
+import { StarIcon } from '@turk.net/mui/icons/StarIcon';
 
 // ✅ Basic List
 <List>
@@ -1171,7 +1171,7 @@ import { Paper, Typography, Box } from '@mui/material';
 
 ```tsx
 import { Chip, Badge, Avatar } from '@mui/material';
-import { DeleteIcon, StarIcon } from '@turknet/onehub/icons';
+import { DeleteIcon, StarIcon } from '@turk.net/mui/icons';
 
 // ✅ Basic chip
 <Chip label="Kategori" variant="filled" color="primary" />

package/LLM_GUIDELINES.md

@@ -1,4 +1,4 @@
-# LLM Guidelines - @turknet/onehub Material UI Theme Package
+# LLM Guidelines - @turk.net/mui Material UI Theme Package
 
 > **MANDATORY**: You MUST read this document in its entirety. Using Material UI components according to the rules defined in this theme package is **mandatory**.
 
@@ -20,7 +20,7 @@
 
 ### Purpose of This Package
 
-`@turknet/onehub` is a theme package that customizes Material UI components through **theme configuration**. It does **NOT** provide its own components — you use Material UI's base components through this theme.
+`@turk.net/mui` is a theme package that customizes Material UI components through **theme configuration**. It does **NOT** provide its own components — you use Material UI's base components through this theme.
 
 ### Critical Rules
 
@@ -141,7 +141,7 @@ palette.[neutral|brand|danger]:
 | **Checkbox** | primary, error |
 | **Radio** | primary, error |
 | **Switch** | primary, error |
-| **Chip** | primary, secondary, error |
+| **Chip** | informative, brand, danger, success, severewarning, important, warning |
 | **Alert** | success, warning, error, info (MUI defaults) |
 | **Badge** | primary, secondary, error, success, warning, info |
 | **Typography** | (default) |
@@ -294,7 +294,7 @@ text.xs.{regular|medium|semibold|bold}        → 12px
 | Component | MUI Doc | Variants | Sizes | Colors | Typography | Purpose |
 |---|---|---|---|---|---|---|
 | **Typography** | [docs](https://mui.com/api/typography/) | display.*.*, text.*.* | - | (default) | display.xl2-xs, text.xl-xs | Text display, headings |
-| **Chip** | [docs](https://mui.com/api/chip/) | filled, outlined | small, medium | primary, secondary, error | text.xs - text.md | Label, category, tag |
+| **Chip** | [docs](https://mui.com/api/chip/) | filled, tint, outline, ghost | small, medium | informative, brand, danger, success, severewarning, important, warning | text.xs - text.md | Label, category, tag, status |
 | **Badge** | [docs](https://mui.com/api/badge/) | - | small, medium | primary, secondary, error, success, warning, info | - | Info badge, counter |
 | **Avatar** | [docs](https://mui.com/api/avatar/) | - | small, medium, large | - | - | User profile picture |
 | **AvatarGroup** | [docs](https://mui.com/api/avatar-group/) | - | - | - | - | Avatar grouping |
@@ -365,7 +365,7 @@ text.xs.{regular|medium|semibold|bold}        → 12px
 - **Material UI Official Documentation**: https://mui.com
 - **Material UI Theme**: https://mui.com/material-ui/customization/theming/
 - **Material UI Components API**: https://mui.com/material-ui/api/
-- **@turknet/onehub Repository**: Your project's repository link
+- **@turk.net/mui Repository**: Your project's repository link
 - **Usage Examples**: You MUST read the `LLM_EXAMPLES.md` file
 
 ---
@@ -398,6 +398,60 @@ text.xs.{regular|medium|semibold|bold}        → 12px
 
 ---
 
+## Layout & Figma Recognition
+
+### Figma "Header tab navigation" → TabBased Layout
+
+**When a Figma design contains a layer named `"Header tab navigation"`:**
+
+This indicates the page uses the TabBased layout (56px header toolbar with navigation buttons). The page content MUST be developed as a **tab** within the existing TabBased layout.
+
+```tsx
+// ❌ WRONG — Do NOT implement the header in your page
+function MyPage() {
+  return (
+    <Box>
+      <AppBar position="static">...</AppBar>  // ← NEVER do this
+      <Box>page content</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT — Page as a tab, layout provides header automatically
+function MyPageContent() {
+  return (
+    <Box>
+      <Typography variant="display.xs.bold">Page Title</Typography>
+      {/* page content only */}
+    </Box>
+  );
+}
+```
+
+**Layout is handled by:** `@turk.net/mui/layouts/app/TabBased`
+
+### Figma "Card" / "Container" → Paper
+
+**When a Figma design contains a layer named `"Card"` or `"Container"`** with:
+- Background: `var(--Neutral-Background-2-Rest, #FAFAFA)` or white
+- Box Shadow: `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)`
+
+→ Use `<Paper elevation={2}>` from `@mui/material`
+
+```tsx
+// ✅ CORRECT
+<Paper elevation={2}>
+  <Box sx={{ p: theme.spacing(4) }}>
+    <Typography variant="text.md.medium">Card Title</Typography>
+    {/* card content */}
+  </Box>
+</Paper>
+```
+
+Paper has `8px` borderRadius by default (from theme). If the Figma design has sharp corners, override with `sx={{ borderRadius: 0 }}`.
+
+---
+
 **Last Updated**: May 2026
 **Version**: 2.0+
-**Package**: @turknet/onehub
+**Package**: @turk.net/mui

package/PAGE_PATTERNS.md

@@ -495,6 +495,66 @@ enqueueSnackbar('Something went wrong', { variant: 'error' });
 
 ---
 
+---
+
+## Pattern 9: Figma Layer → Layout Decision
+
+### 9.1 — "Header tab navigation" Layer → TabBased Layout
+
+**When a Figma design contains a layer named `"Header tab navigation"`:**
+
+This is the TabBased layout's header (56px toolbar with navigation/action buttons). The page is designed as a **tab** within the existing TabBased layout.
+
+**CRITICAL:** Do NOT implement this header in the page component. The header is handled by `@turk.net/mui/layouts/app/TabBased`.
+
+```tsx
+// ❌ WRONG
+function MyPage() {
+  return (
+    <Box>
+      <AppBar>...</AppBar>   // ← Bunu yapma!
+      <Box>content</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT
+// Sayfa TabBased layout altında sekme olarak açılır
+// Sadece içeriği geliştir, header'ı layout sağlar
+function MyPageContent() {
+  return (
+    <Box sx={{ p: theme.spacing(4) }}>
+      <Typography variant="display.xs.bold">Sayfa Başlığı</Typography>
+      {/* sayfa içeriği */}
+    </Box>
+  );
+}
+```
+
+### 9.2 — "Card" / "Container" Layer → Paper
+
+**When a Figma design contains a layer named `"Card"` or `"Container"`** with these styles:
+
+| Style | Value |
+|-------|-------|
+| Background | `var(--Neutral-Background-2-Rest, #FAFAFA)` or white |
+| Box Shadow | `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)` |
+
+→ **Use `<Paper elevation={2}>`** from `@mui/material`
+
+```tsx
+<Paper elevation={2}>
+  <Box sx={{ p: theme.spacing(4) }}>
+    <Typography variant="text.md.medium">Card Title</Typography>
+    {/* card content */}
+  </Box>
+</Paper>
+```
+
+**Corner radius:** Paper has `8px` borderRadius by default (from theme). If Figma shows sharp corners (0px), override with `sx={{ borderRadius: 0 }}`.
+
+---
+
 ## Quick Decision Guide
 
 | If you need to... | Use Pattern |
@@ -507,3 +567,5 @@ enqueueSnackbar('Something went wrong', { variant: 'error' });
 | Show feedback message | Pattern 6: Notifications |
 | Handle no-data state | Pattern 7: Empty State |
 | Handle loading state | Pattern 8: Loading State |
+| Figma has "Header tab navigation" layer | Pattern 9.1: TabBased layout tab |
+| Figma has "Card" / "Container" layer | Pattern 9.2: Paper elevation={2} |

package/SKILL_SETUP.md

@@ -1,6 +1,6 @@
-# OpenCode Skill & Rule Setup — @turknet/onehub Design System
+# OpenCode Skill & Rule Setup — @turk.net/mui Design System
 
-This document explains how to set up OpenCode skills, rules, and verification tools for projects using the `@turknet/onehub` MUI theme package.
+This document explains how to set up OpenCode skills, rules, and verification tools for projects using the `@turk.net/mui` MUI theme package.
 
 ---
 
@@ -19,7 +19,7 @@ The complete design verification system ensures AI agents (LLMs) and developers
 
 - OpenCode CLI installed (`opencode` command works)
 - Project configured with `.opencode.json` or `.opencode/` directory
-- `@turknet/onehub` in `package.json` dependencies
+- `@turk.net/mui` in `package.json` dependencies
 
 ---
 
@@ -34,7 +34,7 @@ The complete design verification system ensures AI agents (LLMs) and developers
 mkdir -p .opencode/skills/turknet-onehub-component-usage
 
 # Copy skill file from theme package
-cp node_modules/@turknet/onehub/.opencode/skills/turknet-onehub-component-usage/SKILL.md \
+cp node_modules/@turk.net/mui/.opencode/skills/turknet-onehub-component-usage/SKILL.md \
    .opencode/skills/turknet-onehub-component-usage/SKILL.md
 ```
 
@@ -45,7 +45,7 @@ cp node_modules/@turknet/onehub/.opencode/skills/turknet-onehub-component-usage/
 mkdir -p .opencode/skills/onehub-design-verification
 
 # Copy skill file from theme package
-cp node_modules/@turknet/onehub/.opencode/skills/onehub-design-verification/SKILL.md \
+cp node_modules/@turk.net/mui/.opencode/skills/onehub-design-verification/SKILL.md \
    .opencode/skills/onehub-design-verification/SKILL.md
 ```
 
@@ -58,7 +58,7 @@ The design-compliance rule automatically enforces design constraints whenever AI
 mkdir -p .opencode/rules
 
 # Copy rule file from theme package
-cp node_modules/@turknet/onehub/.opencode/rules/design-compliance.md \
+cp node_modules/@turk.net/mui/.opencode/rules/design-compliance.md \
    .opencode/rules/design-compliance.md
 ```
 
@@ -69,7 +69,7 @@ cp node_modules/@turknet/onehub/.opencode/rules/design-compliance.md \
 mkdir -p scripts
 
 # Copy verification script
-cp node_modules/@turknet/onehub/scripts/verify-design.js \
+cp node_modules/@turk.net/mui/scripts/verify-design.js \
    scripts/verify-design.js
 ```
 
@@ -171,7 +171,7 @@ your-project/
 ├── scripts/
 │   └── verify-design.js                   # Automated verification script
 ├── node_modules/
-│   └── @turknet/onehub/
+│   └── @turk.net/mui/
 │       ├── DESIGN_RULES.md                # Mandatory design rules
 │       ├── COMPONENT_MAP.md               # Figma → MUI component mapping
 │       ├── COMPONENT_GLOSSARY.md          # Valid component prop combinations
@@ -214,13 +214,13 @@ In OpenCode, available via `Ctrl+P`:
 
 ```bash
 # Read design rules
-cat node_modules/@turknet/onehub/DESIGN_RULES.md
+cat node_modules/@turk.net/mui/DESIGN_RULES.md
 
 # Check component prop validity
-cat node_modules/@turknet/onehub/COMPONENT_GLOSSARY.md
+cat node_modules/@turk.net/mui/COMPONENT_GLOSSARY.md
 
 # Find the right component for a Figma pattern
-cat node_modules/@turknet/onehub/COMPONENT_MAP.md
+cat node_modules/@turk.net/mui/COMPONENT_MAP.md
 ```
 
 ---
@@ -348,14 +348,14 @@ Edit `scripts/verify-design.js` to adjust rule severity or add exceptions. The s
 
 Make sure you copied the script:
 ```bash
-cp node_modules/@turknet/onehub/scripts/verify-design.js scripts/
+cp node_modules/@turk.net/mui/scripts/verify-design.js scripts/
 ```
 
 ---
 
 ## Design Reference Files
 
-All files are available in `node_modules/@turknet/onehub/` after installing:
+All files are available in `node_modules/@turk.net/mui/` after installing:
 
 | File | What It Provides |
 |------|-----------------|
@@ -375,7 +375,7 @@ All files are available in `node_modules/@turknet/onehub/` after installing:
 
 For issues or suggestions:
 
-- **@turknet/onehub Repository**: Internal Git repository
+- **@turk.net/mui Repository**: Internal Git repository
 - **OpenCode Docs**: https://opencode.ai
 - **Material UI Docs**: https://mui.com
 

package/dist/index.js

@@ -1732,6 +1732,7 @@ function createButtonBase() {
   return {
     styleOverrides: {
       root: ({ theme: theme2 }) => ({
+        textTransform: "unset",
         [`&.${material.buttonClasses.root}.${material.buttonClasses.disabled}`]: {
           backgroundColor: theme2.vars?.palette.neutral.background.disabled.rest,
           color: theme2.vars?.palette.neutral.foreground.disabled.rest,
@@ -1782,10 +1783,11 @@ function createButton() {
               props: { size: "extra-small" },
               style: {
                 gap: theme2.spacing(2),
-                "--padding-x": theme2.spacing(3.5),
+                "--padding-x": theme2.spacing(3),
                 "--padding-y": theme2.spacing(2.75),
                 fontSize: theme2.typography.text.xs.medium.fontSize,
                 fontWeight: theme2.typography.text.xs.medium.fontWeight,
+                minWidth: theme2.spacing(8.5),
                 [`.${material.buttonClasses.icon}`]: {
                   marginTop: theme2.spacing(-0.5),
                   marginBottom: theme2.spacing(-0.5)
@@ -1817,6 +1819,7 @@ function createButton() {
                 gap: theme2.spacing(2.5),
                 "--padding-y": theme2.spacing(3.25),
                 "--padding-x": theme2.spacing(4),
+                minWidth: theme2.spacing(10),
                 // -- ONLY ICON SIZE & SPACES
                 [`& svg.${material.svgIconClasses.root}`]: {
                   width: theme2.spacing(4),
@@ -1844,6 +1847,7 @@ function createButton() {
                 fontSize: theme2.typography.text.md.medium.fontSize,
                 fontWeight: theme2.typography.text.md.medium.fontWeight,
                 gap: theme2.spacing(3),
+                minWidth: theme2.spacing(12),
                 "--padding-x": theme2.spacing(4.5),
                 "--padding-y": theme2.spacing(4),
                 [`.${material.buttonClasses.icon}`]: {
@@ -1874,6 +1878,7 @@ function createButton() {
                 fontSize: theme2.typography.text.md.medium.fontSize,
                 fontWeight: theme2.typography.text.md.medium.fontWeight,
                 gap: theme2.spacing(3.5),
+                minWidth: theme2.spacing(13),
                 "--padding-x": theme2.spacing(5),
                 "--padding-y": theme2.spacing(4.5),
                 [`.${material.buttonClasses.icon}`]: {
@@ -1904,6 +1909,7 @@ function createButton() {
                 fontSize: theme2.typography.text.lg.medium.fontSize,
                 fontWeight: theme2.typography.text.lg.medium.fontWeight,
                 gap: theme2.spacing(4),
+                minWidth: theme2.spacing(15),
                 "--padding-x": theme2.spacing(5.5),
                 "--padding-y": theme2.spacing(5.25),
                 [`.${material.buttonClasses.icon}`]: {
@@ -3511,9 +3517,72 @@ function createBadge() {
     }
   };
 }
+function createTabs() {
+  return {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        minHeight: "32px",
+        variants: [
+          {
+            props: { indicatorColor: "primary" },
+            style: {
+              [`.${material.tabsClasses.indicator}`]: {
+                backgroundColor: theme2.vars?.palette.brand.stroke.compound.rest
+              }
+            }
+          },
+          {
+            props: { textColor: "primary" },
+            style: {
+              [`.${material.tabClasses.root}.${material.tabClasses.textColorPrimary}`]: {
+                color: theme2.vars?.palette.neutral.foreground[2].rest
+              },
+              [`.${material.tabClasses.root}.${material.tabClasses.textColorPrimary}.${material.tabClasses.selected}`]: {
+                color: theme2.vars?.palette.brand.foreground.compound.rest
+              }
+            }
+          }
+        ]
+      })
+    }
+  };
+}
+function createTab() {
+  return {
+    defaultProps: {
+      disableRipple: true,
+      disableFocusRipple: true,
+      disableTouchRipple: true
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        textTransform: "unset",
+        minHeight: theme2.spacing(8),
+        height: theme2.spacing(8),
+        padding: "0px 4px 11px",
+        ":not(:last-child)": {
+          marginRight: theme2.spacing(4)
+        },
+        variants: [
+          {
+            props: { color: "primary" },
+            style: {
+              color: theme2.vars?.palette.brand.foreground.compound.rest
+            }
+          }
+        ]
+      }),
+      labelIcon: ({ theme: theme2 }) => ({
+        padding: "0px 4px 11px",
+        minHeight: theme2.spacing(8),
+        height: theme2.spacing(8)
+      })
+    }
+  };
+}
 
 // theme/components/index.tsx
-var Components22 = {
+var Components23 = {
   MuiAutocomplete: createAutocomplete(),
   MuiAvatar: createAvatar(),
   MuiBadge: createBadge(),
@@ -3547,7 +3616,9 @@ var Components22 = {
   MuiSlider: createSlider(),
   MuiSwitch: createSwitch(),
   MuiTextField: createTextField(),
-  MuiTypography: createTypography()
+  MuiTypography: createTypography(),
+  MuiTab: createTab(),
+  MuiTabs: createTabs()
 };
 
 // theme/typography/typographyVariants.ts
@@ -3915,7 +3986,7 @@ var theme = styles.createTheme({
   shape: {
     borderRadius: 8
   },
-  components: Components22,
+  components: Components23,
   colorSchemes: colorSchemes_default
 });
 var theme_default = theme;