@turk.net/mui 3.0.8 → 3.0.10

package/.opencode/rules/design-compliance.md

@@ -66,14 +66,26 @@ sx={{ bgcolor: 'var(--brand-background-1-rest)' }}
 
 ### LAYOUT — MUST use OneHub layout components
 
-- TabBased: `@turknet/onehub/layouts/app/TabBased`
-- WithSidebar: `@turknet/onehub/layouts/page/WithSidebar`
-- **MUST NOT** use MUI Drawer or AppBar directly
+- TabBased: `@turk.net/mui/layouts/app/TabBased`
+- Dashboard: Modül başına özel sidebar layout (`src/components/layouts/dashboard/`)
+- Empty: Passthrough wrapper (`src/components/layouts/empty.tsx`)
+- Login: Özel login layout'u
+- **MUST NOT** use MUI Drawer or AppBar directly (Drawer slotProps ile kullanılabilir)
+
+**Figma "Header tab navigation" layer → TabBased layout:**
+Eğer Figma tasarımında `"Header tab navigation"` isimli bir layer varsa, bu sayfa TabBased layout içinde bir **sekme** olarak geliştirilmelidir. Header'ı sayfa içinde tekrar oluşturma — layout otomatik olarak sağlar.
+
+**Figma "Card" / "Container" layer → Paper elevation={2}:**
+Eğer Figma'da `"Card"` veya `"Container"` isimli bir layer şu stillere sahipse:
+- Background: `#FAFAFA` veya beyaz
+- Box Shadow: `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)`
+→ `<Paper elevation={2}>` kullan. Tema default `borderRadius: 8px` verir; Figma köşeliyse `sx={{ borderRadius: 0 }}` ile override et.
 
 ### ICONS — MUST use OneHub icon system
 
-- Import from `@turknet/onehub/icons` (SVG components, preferred)
+- Import from `@turk.net/mui/icons/*` (SVG components, tercih edilen)
 - Or use Tune icon font via project's `TuneIcon` component
+- **MUST NOT** import from `@mui/icons-material` (sadece istisnai durumlarda `Error` ikonu kullanılabilir)
 
 ### STYLING — MUST use theme-aware styling
 
@@ -92,7 +104,7 @@ Before committing any UI code, verify:
 - [ ] All CSS `var()` references use `--palette-` prefix (e.g. `var(--palette-neutral-foreground-1-rest)`)
 - [ ] No raw px values in spacing (`'8px'`, `16`)
 - [ ] All color props match valid values per component
-- [ ] Icons from `@turknet/onehub/icons`, not from `@mui/icons-material`
+- [ ] Icons from `@turk.net/mui/icons`, not from `@mui/icons-material`
 
 ---
 

package/.opencode/skills/onehub-design-verification/SKILL.md

@@ -4,7 +4,7 @@ description: Use WHEN user asks for design review, design audit, or after creati
 license: MIT
 compatibility: React 18.2+, Next.js 13+, MUI v5/v9
 metadata:
-  theme-package: "@turknet/onehub"
+  theme-package: "@turk.net/mui"
   design-system: "Untitled UI"
 ---
 
@@ -65,7 +65,7 @@ Complete each check in order. Every check marked ❌ is a **design defect** that
   - `Button`: `primary`, `secondary`, `error`
   - `TextField`/`Select`: `neutral`, `brand`, `danger`
   - `Checkbox`/`Radio`/`Switch`: `primary`, `error`
-  - `Chip`: `primary`, `secondary`, `error`
+  - `Chip`: `informative`, `brand`, `danger`, `success`, `severewarning`, `important`, `warning`
   - `Badge`: `default`, `brand`, `success`, `danger`, `severewarning`, `warning`, `important`
   - `Alert`: `success`, `warning`, `error`, `info`
 - [ ] No `color="success"` on Button (not defined)
@@ -148,8 +148,8 @@ sx={{ marginLeft: 12 }}
 - [ ] Tables use custom Box-based layout (not MUI Table for data tables — see COMPONENT_MAP.md#table-data-grid)
 - [ ] Forms use Formik + Yup
 - [ ] Data fetching uses React Query (TanStack Query)
-- [ ] Icons imported from `@turknet/onehub/icons` or Tune icon font
-- [ ] Layout uses `TabBasedLayout` or `WithSidebarLayout` from `@turknet/onehub`
+- [ ] Icons imported from `@turk.net/mui/icons/*` or Tune icon font
+- [ ] Layout uses `TabBasedLayout` from `@turk.net/mui` or custom dashboard layout
 
 ### 7. Typography Variant Selection Check
 

package/.opencode/skills/turknet-onehub-component-usage/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: turknet-onehub-component-usage
-description: Use ONLY when generating Material UI component code with @turknet/onehub theme. Enforces correct component usage, variant/size/color rules, and prohibits custom components.
+description: Use ONLY when generating Material UI component code with @turk.net/mui theme. Enforces correct component usage, variant/size/color rules, and prohibits custom components.
 license: MIT
 compatibility: React 18.2+, Next.js 13+
 metadata:
@@ -8,16 +8,16 @@ metadata:
   mui-version: "7.0.0+"
 ---
 
-# @turknet/onehub Material UI Component Usage Guide
+# @turk.net/mui Material UI Component Usage Guide
 
-> **CRITICAL FOR LLM MODELS**: This skill is essential when writing components for projects using `@turknet/onehub`. You MUST read and apply ALL rules.
+> **CRITICAL FOR LLM MODELS**: This skill is essential when writing components for projects using `@turk.net/mui`. You MUST read and apply ALL rules.
 
 ---
 
 ## Scope & Trigger
 
 **You MUST use this skill WHEN:**
-- Generating React/TSX components for projects using `@turknet/onehub` theme
+- Generating React/TSX components for projects using `@turk.net/mui` theme
 - Writing code that imports Material UI components (`@mui/material`)
 - Styling buttons, forms, typography, cards, dialogs, tables, or any MUI component
 - Creating layouts with Paper, Container, Box, Stack, Grid
@@ -34,7 +34,15 @@ metadata:
 ### Rule 1: You MUST ONLY Use Material UI from @mui/material
 
 ```tsx
-// ✅ CORRECT
+// ✅ CORRECT — Path-based import (gerçek projelerde kullanılan yöntem)
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Chip from "@mui/material/Chip";
+
+// ✅ ALSO CORRECT — Barrel import
 import { Button, Typography, TextField } from '@mui/material';
 
 // ❌ WRONG
@@ -127,7 +135,7 @@ palette:
 | **Checkbox** | primary, error | primary |
 | **Radio** | primary, error | primary |
 | **Switch** | primary, error | primary |
-| **Chip** | primary, secondary, error | primary |
+| **Chip** | informative, brand, danger, success, severewarning, important, warning | informative |
 | **Alert** | success, warning, error, info | - |
 | **Badge** | primary, secondary, error, success, warning, info | - |
 
@@ -412,10 +420,12 @@ You MUST use the `elevation` prop with values **0-24 only**:
 
 ```tsx
 // Different Chip styles
-<Chip label="Tag" variant="filled" color="primary" />
-<Chip label="Tag" variant="outlined" color="secondary" />
-<Chip label="Removable" onDelete={() => {}} />
-<Chip icon={<StarIcon />} label="Favorite" />
+<Chip label="Tag" variant="filled" color="informative" />
+<Chip label="Tag" variant="tint" color="brand" />
+<Chip label="Tag" variant="outline" color="important" />
+<Chip label="Removable" variant="tint" color="primary" onDelete={() => {}} />
+<Chip icon={<StarIcon />} label="Active" variant="tint" color="success" />
+<Chip icon={<ErrorIcon />} label="Error" variant="tint" color="danger" />
 
 // Badge
 <Badge badgeContent={4} color="error">
@@ -436,6 +446,55 @@ You MUST use the `elevation` prop with values **0-24 only**:
 
 ---
 
+## 📐 Layout & Figma Recognition
+
+### Figma "Header tab navigation" → TabBased Layout
+
+**When a Figma design contains a layer named `"Header tab navigation"`:**
+
+This is the TabBased layout header. The page MUST be developed as a **tab** within the TabBased layout — do NOT implement the header in your page component.
+
+```tsx
+// ❌ WRONG — Recreating the layout header
+function MyPage() {
+  return (
+    <Box>
+      <AppBar>...</AppBar>  // ← TabBased header'ı sayfada tekrar oluşturma!
+      <Box>page content</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT — Page content only, layout provides header
+function MyPageContent() {
+  return (
+    <Box>
+      <Typography variant="display.xs.bold">Page Title</Typography>
+      {/* sadece sayfa içeriği */}
+    </Box>
+  );
+}
+```
+
+### Figma "Card" / "Container" → Paper elevation={2}
+
+**When a Figma design contains a layer named `"Card"` or `"Container"`** with background `#FAFAFA` / white and shadow `0 0 2px + 0 1px 2px rgba`:
+
+→ Use `<Paper elevation={2}>` from `@mui/material`
+
+```tsx
+// ✅ CORRECT — Match Figma shadow2
+<Paper elevation={2}>
+  <Box sx={{ p: theme.spacing(4) }}>
+    {/* card content */}
+  </Box>
+</Paper>
+```
+
+Paper default borderRadius: `8px` (theme). Override with `sx={{ borderRadius: 0 }}` if Figma shows sharp corners.
+
+---
+
 ## 🚨 Common Mistakes to Avoid
 
 ### Mistake 1: Custom Button Component
@@ -633,7 +692,7 @@ export function LoginForm() {
 
 ## 📚 References
 
-- **@turknet/onehub Package**: https://npm.js/package/@turknet/onehub
+- **@turk.net/mui Package**: https://npm.js/package/@turk.net/mui
 - **LLM Guidelines**: Look for `LLM_GUIDELINES.md` in the package
 - **Usage Examples**: Look for `LLM_EXAMPLES.md` in the package
 - **Material UI Docs**: https://mui.com/material-ui/
@@ -646,7 +705,7 @@ export function LoginForm() {
 ### 1. Install the Theme Package
 
 ```bash
-yarn add @turknet/onehub
+yarn add @turk.net/mui
 ```
 
 ### 2. Apply Theme Provider
@@ -654,8 +713,8 @@ yarn add @turknet/onehub
 ```tsx
 // pages/_app.tsx or app layout
 import { ThemeProvider } from '@mui/material/styles';
-import theme from '@turknet/onehub/theme';
-import '@turknet/onehub/fonts.css';
+import theme from '@turk.net/mui/theme';
+import '@turk.net/mui/fonts.css';
 
 export default function App({ Component, pageProps }) {
   return (