@aliugurlafci/aula-lib

v0.1.18

Published

2 months ago

Modern glassmorphism React component library with 55+ components

0High
0Medium
0Low

aliugurlafci

react components ui glassmorphism tailwindcss typescript design-system

Aula UI Library

Modern glassmorphism tabanlı React component library. 55+ bileşen ile modern ve şık kullanıcı arayüzleri oluşturun.

npm version license

✨ Özellikler

🎨 Glassmorphism Design - Katmanlı cam yüzeyler, specular highlight ve saturate ile vibrancy
🌙 Dark/Light/System Theme - data-theme ile otomatik tema; hiç ayar yapılmazsa prefers-color-scheme takip edilir
🪄 auto variant - Bileşenler varsayılan olarak aktif temayı izler; light/dark açık override olarak kalır
📱 Responsive - Mobil uyumlu bileşenler
🎯 TypeScript - Tam tip desteği
🌳 RSC-uyumlu giriş noktaları - /server girişi tree-shake edilebilir (~4.6 KB gzip); istemci girişi tek bir bundle olarak gelir (~94 KB gzip)
♿ Accessible - WCAG uyumlu
⚡ Lazy Loading - Opsiyonel bağımlılıklar dinamik olarak yüklenir

📦 Kurulum

npm install @aliugurlafci/aula-lib
# veya
yarn add @aliugurlafci/aula-lib
# veya
pnpm add @aliugurlafci/aula-lib

Gerekli Peer Dependencies

npm install react react-dom

Opsiyonel Peer Dependencies

Belirli özellikleri kullanmak için ek paketler gerekebilir:

| Paket | Özellik | Kurulum | |-------|---------|---------| | tailwindcss@4 | Tailwind CSS entegrasyonu | npm install tailwindcss@4 | | xlsx | Excel export (GlassTable) | npm install xlsx | | jspdf + jspdf-autotable | PDF export (GlassTable) | npm install jspdf jspdf-autotable | | hls.js | HLS streaming (GlassVideoPlayer) | npm install hls.js | | dashjs | DASH streaming (GlassVideoPlayer) | npm install dashjs | | react-hook-form + zod | Form validation (GlassForm) | npm install react-hook-form @hookform/resolvers zod |

Not: Opsiyonel bağımlılıklar sadece ilgili özellik kullanıldığında dinamik olarak yüklenir. Yüklü değilse, fallback davranışı devreye girer veya kullanıcıya bilgi veren hata mesajı gösterilir.

🚀 Hızlı Başlangıç

1. Tailwind CSS v4 Kurulumu (Önerilen)

⚠️ Önemli: Bu kütüphane Tailwind CSS v4 gerektirir. v3 kullanıyorsanız önce upgrade edin.

tailwind.config.js dosyanıza preset ekleyin:

// tailwind.config.js
module.exports = {
  presets: [require('@aliugurlafci/aula-lib/tailwind.preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@aliugurlafci/aula-lib/dist/**/*.{js,mjs}',
  ],
}

2. CSS Import

// app.tsx veya main.tsx
import '@aliugurlafci/aula-lib/styles.css'

3. Bileşenleri Kullanın

import { GlassButton, GlassCard, GlassInput } from '@aliugurlafci/aula-lib'

function App() {
  return (
    <GlassCard title="Hoş Geldiniz">
      <GlassInput placeholder="Adınızı girin" />
      <GlassButton variant="primary">Gönder</GlassButton>
    </GlassCard>
  )
}

4. Next.js App Router ile Kullanım

Server Component'ları için ayrı import kullanın:

// Server Components için
import { GlassCard, GlassButton, GlassBadge } from '@aliugurlafci/aula-lib/server'

// Client Components için
import { GlassInput, GlassModal, GlassTable } from '@aliugurlafci/aula-lib/client'

// veya tüm bileşenler (client)
import { ... } from '@aliugurlafci/aula-lib'

🔧 Providers & Hooks

ThemeProvider

Tema yönetimi için uygulamanızı ThemeProvider ile sarın. Provider data-theme niteliğini <html> üzerine yazar; bileşenler bu niteliğe bağlı CSS değişkenlerinden beslenir.

import { ThemeProvider } from '@aliugurlafci/aula-lib'

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <YourApp />
    </ThemeProvider>
  )
}

defaultTheme="system" işletim sistemi tercihini izler ve tercih değiştiğinde canlı olarak güncellenir. Kullanıcı seçimi localStorage'a yazılır ve açık sekmeler arasında senkronize edilir.

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | children | ReactNode | - | Alt bileşenler | | defaultTheme | "system" \| "light" \| "dark" | "system" | Başlangıç modu | | storageKey | string \| null | "aula-theme" | localStorage anahtarı. null ile kalıcılık kapatılır | | attribute | string | "data-theme" | Yazılacak DOM niteliği | | element | HTMLElement \| null | document.documentElement | Niteliği alacak eleman | | enableSystem | boolean | true | system modunu ve OS takibini aç/kapat |

SSR notu: Provider artık ilk render'da null döndürmez; children sunucuda da render edilir, tema niteliği effect içinde uygulanır. Böylece boş ilk boyama ve hydration uyuşmazlığı oluşmaz.

ThemeScript

İlk boyamadan önce temayı uygulayarak "tema sıçraması"nı (flash) engeller. Next.js App Router'da <head> içine koyun:

// app/layout.tsx
import { ThemeScript, ThemeProvider } from '@aliugurlafci/aula-lib'
import '@aliugurlafci/aula-lib/styles.css'

export default function RootLayout({ children }) {
  return (
    <html lang="tr" suppressHydrationWarning>
      <head>
        <ThemeScript defaultTheme="system" />
      </head>
      <body>
        <ThemeProvider defaultTheme="system">{children}</ThemeProvider>
      </body>
    </html>
  )
}

useGlassTheme

Tema durumunu okumak ve değiştirmek için kullanılır.

import { useGlassTheme } from '@aliugurlafci/aula-lib'

function ThemeToggle() {
  const { themeVariant, setTheme, toggleTheme } = useGlassTheme()
  
  return (
    <div>
      <p>Aktif tema: {themeVariant}</p>
      <button onClick={toggleTheme}>Tema Değiştir</button>
      <button onClick={() => setTheme('dark')}>Karanlık Mod</button>
    </div>
  )
}

Dönen Değerler

| Değer | Tip | Açıklama | |-------|-----|----------| | theme | GlassTheme | Aktif tema objesi (renkler, stiller) | | themeVariant | "light" \| "dark" | Çözümlenmiş tema (system burada çözülmüş gelir) | | mode | "system" \| "light" \| "dark" | Talep edilen mod | | mounted | boolean | İstemci tarafında tercih okundu mu | | setTheme | (mode: ThemeMode) => void | Modu değiştirir | | toggleTheme | () => void | Light ↔ dark arasında geçiş yapar |

useGlassTheme, provider dışında kullanılırsa hata fırlatır. Provider olmadan da çalışması gereken bileşenler için useGlassThemeSafe kullanın; bu sürüm light temaya geri düşer.

useGlassStyle

Dinamik glass stilleri oluşturmak için kullanılır.

import { useGlassStyle } from '@aliugurlafci/aula-lib'

function CustomGlassComponent() {
  const { baseStyle, hoverStyle, getGlassClasses, theme } = useGlassStyle({
    blur: 'lg',
    shadow: 'md',
    bordered: true,
    hoverable: true
  })
  
  return (
    <div style={baseStyle} className={getGlassClasses('my-custom-class')}>
      Custom glass bileşen
    </div>
  )
}

Options

| Option | Tip | Varsayılan | Açıklama | |--------|-----|------------|----------| | blur | "none" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" | "md" | Blur yoğunluğu | | shadow | "none" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Gölge yoğunluğu | | bordered | boolean | true | Kenarlık göster | | hoverable | boolean | false | Hover efekti aktif | | glow | boolean | false | Accent renginde dış parıltı ekle |

📚 Core Bileşenler

GlassButton

Glass efektli buton bileşeni.

import { GlassButton } from '@aliugurlafci/aula-lib'

<GlassButton buttonType="primary" size="large">
  Kaydet
</GlassButton>

<GlassButton buttonType="dashed" danger loading>
  Siliniyor...
</GlassButton>

<GlassButton icon={<SearchIcon />} shape="circle" />

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | buttonType | "default" \| "primary" \| "dashed" \| "text" \| "link" | "default" | Buton stili | | size | "small" \| "middle" \| "large" | "middle" | Buton boyutu | | variant | ThemeVariant | - | Tema varyantı | | blur | BlurSize | "md" | Blur yoğunluğu | | shadow | ShadowSize | "md" | Gölge yoğunluğu | | bordered | boolean | true | Kenarlık göster | | icon | ReactNode | - | Sol ikon | | iconRight | ReactNode | - | Sağ ikon | | loading | boolean | false | Yükleniyor durumu | | danger | boolean | false | Tehlike stili | | ghost | boolean | false | Transparan arkaplan | | block | boolean | false | Tam genişlik | | shape | "default" \| "circle" \| "round" | "default" | Buton şekli |

GlassCard

Glass efektli kart bileşeni.

import { GlassCard } from '@aliugurlafci/aula-lib'

<GlassCard 
  title="Başlık"
  extra={<a href="#">Daha Fazla</a>}
  hoverable
  actions={[<EditIcon />, <DeleteIcon />]}
>
  Kart içeriği
</GlassCard>

<GlassCard cover={<img src="/image.jpg" alt="Cover" />} loading>
  Yükleniyor...
</GlassCard>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | title | ReactNode | - | Kart başlığı | | extra | ReactNode | - | Sağ üst köşe içerik | | cover | ReactNode | - | Üst kapak görseli | | actions | ReactNode[] | - | Alt aksiyon butonları | | hoverable | boolean | false | Hover efekti | | loading | boolean | false | Skeleton göster | | size | "default" \| "small" | "default" | Kart boyutu | | variant | ThemeVariant | - | Tema varyantı | | blur | BlurSize | - | Blur yoğunluğu | | shadow | ShadowSize | - | Gölge yoğunluğu | | bordered | boolean | true | Kenarlık göster |

GlassAvatar

Kullanıcı avatar bileşeni.

import { GlassAvatar, GlassAvatarGroup } from '@aliugurlafci/aula-lib'

<GlassAvatar src="/user.jpg" size="large" />

<GlassAvatar icon={<UserIcon />} shape="square" />

<GlassAvatar>AB</GlassAvatar>

<GlassAvatarGroup max={{ count: 3 }}>
  <GlassAvatar src="/user1.jpg" />
  <GlassAvatar src="/user2.jpg" />
  <GlassAvatar src="/user3.jpg" />
  <GlassAvatar src="/user4.jpg" />
</GlassAvatarGroup>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | src | string | - | Resim URL'i | | size | number \| "small" \| "default" \| "large" | "default" | Avatar boyutu | | shape | "circle" \| "square" | "circle" | Avatar şekli | | icon | ReactNode | - | İkon (resim yoksa) | | alt | string | - | Alternatif metin | | gap | number | - | Metin içerik boşluğu | | onError | () => boolean \| void | - | Hata handler |

GlassBadge

Sayaç ve durum göstergesi.

import { GlassBadge, GlassBadgeRibbon } from '@aliugurlafci/aula-lib'

<GlassBadge count={5}>
  <GlassButton>Mesajlar</GlassButton>
</GlassBadge>

<GlassBadge dot status="processing">
  <GlassAvatar src="/user.jpg" />
</GlassBadge>

<GlassBadge count={99} overflowCount={50} />

<GlassBadgeRibbon text="İndirim" color="red">
  <GlassCard>İçerik</GlassCard>
</GlassBadgeRibbon>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | count | ReactNode | - | Gösterilecek sayı | | dot | boolean | false | Nokta göster | | overflowCount | number | 99 | Max görünen sayı | | showZero | boolean | false | Sıfırı göster | | status | "success" \| "processing" \| "default" \| "error" \| "warning" | - | Durum rengi | | color | string | - | Özel renk | | offset | [number, number] | - | Pozisyon offset | | size | "default" \| "small" | "default" | Badge boyutu | | text | ReactNode | - | Durum metni |

GlassFloatingButton

Yüzen aksiyon butonu.

import { GlassFloatingButton } from '@aliugurlafci/aula-lib'

<GlassFloatingButton 
  icon={<PlusIcon />}
  position="bottom-right"
  onClick={() => console.log('Tıklandı')}
/>

📝 Data Entry Bileşenleri

GlassInput

Glass efektli metin giriş alanı.

import { GlassInput, GlassTextArea } from '@aliugurlafci/aula-lib'

<GlassInput 
  label="E-posta"
  placeholder="[email protected]"
  prefix={<MailIcon />}
  allowClear
/>

<GlassInput 
  status="error"
  error="Geçersiz e-posta adresi"
/>

<GlassInput 
  addonBefore="https://"
  addonAfter=".com"
/>

<GlassTextArea 
  label="Açıklama"
  autoSize={{ minRows: 3, maxRows: 6 }}
  showCount
  maxLength={500}
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | label | ReactNode | - | Etiket | | size | "small" \| "middle" \| "large" | "middle" | Boyut | | status | "error" \| "warning" | - | Doğrulama durumu | | inputVariant | "outlined" \| "borderless" \| "filled" | "outlined" | Görsel varyant | | allowClear | boolean | false | Temizle butonu | | prefix | ReactNode | - | Sol içerik | | suffix | ReactNode | - | Sağ içerik | | addonBefore | ReactNode | - | Sol eklenti | | addonAfter | ReactNode | - | Sağ eklenti | | showCount | boolean | false | Karakter sayacı | | error | string | - | Hata mesajı |

GlassSelect

Seçim kutusu bileşeni.

import { GlassSelect } from '@aliugurlafci/aula-lib'

<GlassSelect
  label="Şehir"
  placeholder="Şehir seçin"
  options={[
    { label: 'İstanbul', value: 'istanbul' },
    { label: 'Ankara', value: 'ankara' },
    { label: 'İzmir', value: 'izmir' }
  ]}
  showSearch
  allowClear
/>

<GlassSelect
  mode="multiple"
  placeholder="Etiketler"
  maxTagCount={3}
  options={tags}
/>

<GlassSelect
  mode="tags"
  placeholder="Yeni etiket ekle"
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | options | GlassSelectOption[] | - | Seçenek listesi | | mode | "single" \| "multiple" \| "tags" | "single" | Seçim modu | | value | string \| number \| (string \| number)[] | - | Seçili değer | | placeholder | ReactNode | - | Placeholder | | allowClear | boolean | false | Temizle butonu | | showSearch | boolean | false | Arama kutusu | | filterOption | boolean \| Function | - | Filtreleme fonksiyonu | | loading | boolean | false | Yükleniyor durumu | | maxCount | number | - | Max seçim sayısı | | maxTagCount | number \| "responsive" | - | Max tag görüntüsü | | size | "small" \| "middle" \| "large" | "middle" | Boyut | | status | "error" \| "warning" | - | Doğrulama durumu | | disabled | boolean | false | Devre dışı | | label | ReactNode | - | Etiket | | error | string | - | Hata mesajı |

GlassSwitch

Toggle switch bileşeni.

import { GlassSwitch } from '@aliugurlafci/aula-lib'

<GlassSwitch 
  checked={enabled}
  onChange={setEnabled}
/>

<GlassSwitch 
  checkedChildren="Açık"
  unCheckedChildren="Kapalı"
/>

GlassDatePicker

Tarih seçici bileşeni.

import { GlassDatePicker } from '@aliugurlafci/aula-lib'

<GlassDatePicker 
  label="Doğum Tarihi"
  placeholder="Tarih seçin"
  onChange={(date) => console.log(date)}
/>

GlassColorPicker

Renk seçici bileşeni.

import { GlassColorPicker } from '@aliugurlafci/aula-lib'

<GlassColorPicker 
  value="#3b82f6"
  onChange={(color) => console.log(color)}
/>

GlassNumberInput

Sayı giriş bileşeni.

import { GlassNumberInput } from '@aliugurlafci/aula-lib'

<GlassNumberInput 
  label="Miktar"
  min={0}
  max={100}
  step={5}
/>

GlassTransfer

Transfer listesi bileşeni.

import { GlassTransfer } from '@aliugurlafci/aula-lib'

<GlassTransfer
  dataSource={items}
  targetKeys={selectedKeys}
  onChange={setSelectedKeys}
  titles={['Mevcut', 'Seçili']}
  render={(item) => item.title}
/>

GlassCheckbox

import { GlassCheckbox, GlassCheckboxGroup } from '@aliugurlafci/aula-lib'

<GlassCheckbox defaultChecked>Şartları kabul ediyorum</GlassCheckbox>

<GlassCheckbox indeterminate description="Bazı alt öğeler seçili">
  Tümünü seç
</GlassCheckbox>

<GlassCheckboxGroup
  direction="vertical"
  options={[
    { label: 'E-posta', value: 'email', description: 'Haftalık özet' },
    { label: 'SMS', value: 'sms' },
    { label: 'Push', value: 'push', disabled: true },
  ]}
  defaultValue={['email']}
  onChange={(values) => console.log(values)}
/>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | checked / defaultChecked | boolean | - | Kontrollü / kontrolsüz durum | | indeterminate | boolean | false | Karışık ("tümünü seç") durumu | | size | "small" \| "middle" \| "large" | "middle" | Kutu boyutu | | description | ReactNode | - | Etiket altı yardımcı metin | | error | ReactNode | - | Doğrulama mesajı; kutuyu hata rengine çevirir | | onChange | (checked, event) => void | - | Değişim callback'i |

GlassRadio

Üç sunum biçimi: klasik nokta, segment butonları ve kart.

import { GlassRadio, GlassRadioGroup } from '@aliugurlafci/aula-lib'

<GlassRadioGroup
  defaultValue="monthly"
  options={[{ label: 'Aylık', value: 'monthly' }, { label: 'Yıllık', value: 'yearly' }]}
/>

<GlassRadioGroup optionType="button" defaultValue="grid"
  options={[{ label: 'Izgara', value: 'grid' }, { label: 'Liste', value: 'list' }]} />

<GlassRadioGroup
  optionType="card"
  defaultValue="pro"
  options={[
    { label: 'Başlangıç', value: 'starter', description: '5 proje', icon: <Zap /> },
    { label: 'Pro', value: 'pro', description: 'Sınırsız proje', icon: <Rocket /> },
  ]}
/>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | optionType | "default" \| "button" \| "card" | "default" | Sunum biçimi | | value / defaultValue | string \| number | - | Seçili değer | | direction | "horizontal" \| "vertical" | "horizontal" | Yerleşim | | name | string | otomatik | Input name değeri |

GlassSlider

import { GlassSlider } from '@aliugurlafci/aula-lib'

<GlassSlider defaultValue={40} tooltip="hover" />

<GlassSlider range defaultValue={[20, 70]} onChangeComplete={(v) => console.log(v)} />

<GlassSlider
  step={null}
  marks={[
    { value: 0, label: 'Düşük' },
    { value: 50, label: 'Orta' },
    { value: 100, label: 'Yüksek' },
  ]}
  defaultValue={50}
/>

<GlassSlider vertical height={220} defaultValue={60} />

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | min / max | number | 0 / 100 | Aralık | | step | number \| null | 1 | Adım. null ise yalnızca marks'a yapışır | | range | boolean | false | Çift tutamaçlı aralık seçimi | | vertical | boolean | false | Dikey yerleşim | | marks | GlassSliderMark[] \| Record<number, ReactNode> | - | Tik işaretleri | | tooltip | "always" \| "hover" \| "none" | "hover" | Değer balonu | | onChange | (value) => void | - | Sürüklerken her değişimde | | onChangeComplete | (value) => void | - | Tutamaç bırakıldığında |

Klavye desteği: ok tuşları, PageUp/PageDown, Home/End.

GlassRate

import { GlassRate } from '@aliugurlafci/aula-lib'

<GlassRate defaultValue={3} />
<GlassRate allowHalf defaultValue={3.5} tooltips={['Kötü', 'Zayıf', 'Normal', 'İyi', 'Harika']} />
<GlassRate readOnly value={4} size={16} />
<GlassRate character={<Heart />} count={3} />

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | count | number | 5 | Sembol sayısı | | allowHalf | boolean | false | Yarım puan | | allowClear | boolean | true | Aynı değere tıklayınca sıfırla | | readOnly | boolean | false | Salt okunur | | character | ReactNode \| (index) => ReactNode | yıldız | Özel sembol |

GlassUpload

import { GlassUpload } from '@aliugurlafci/aula-lib'

<GlassUpload
  accept="image/*"
  listType="picture"
  maxSize={5 * 1024 * 1024}
  maxCount={5}
  hint="PNG, JPG — en fazla 5 MB"
  customRequest={async (file, onProgress) => {
    const body = new FormData()
    body.append('file', file.originFileObj!)
    await uploadWithProgress('/api/upload', body, onProgress)
  }}
  onChange={(files) => console.log(files)}
  onReject={(files, reason) => alert(reason)}
/>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | listType | "dragger" \| "text" \| "picture" | "dragger" | Sunum biçimi | | maxSize | number | - | Bayt cinsinden üst sınır | | maxCount | number | - | En fazla dosya sayısı | | beforeUpload | (file, list) => boolean \| Promise<boolean> | - | false dönerse dosya reddedilir | | customRequest | (file, onProgress) => Promise<void> | - | Gerçek yükleme işi; onProgress ilerleme çubuğunu sürer | | onReject | (files, reason) => void | - | Reddedilen dosyalar ve gerekçesi |

Görsel önizlemeleri için üretilen object URL'ler bileşen sökülünce serbest bırakılır.

📊 Data Display Bileşenleri

GlassTable

Gelişmiş tablo bileşeni.

import { GlassTable } from '@aliugurlafci/aula-lib'

const columns = [
  { title: 'Ad', dataIndex: 'name', sorter: true },
  { title: 'Yaş', dataIndex: 'age', sorter: (a, b) => a.age - b.age },
  { 
    title: 'Durum', 
    dataIndex: 'status',
    filters: [
      { text: 'Aktif', value: 'active' },
      { text: 'Pasif', value: 'inactive' }
    ]
  },
  {
    title: 'İşlem',
    render: (_, record) => <button onClick={() => edit(record)}>Düzenle</button>
  }
]

<GlassTable
  dataSource={data}
  columns={columns}
  rowSelection={{
    type: 'checkbox',
    onChange: (keys, rows) => console.log(keys, rows)
  }}
  pagination={{ pageSize: 10 }}
  toolbar={{
    search: true,
    columnChooser: true,
    density: true,
    export: {
      formats: ['csv', 'excel', 'pdf'],
      filename: 'rapor'
    }
  }}
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | dataSource | T[] | - | Veri kaynağı | | columns | GlassColumnType<T>[] | - | Kolon tanımları | | rowKey | string \| ((record: T) => string) | "id" | Satır key'i | | rowSelection | GlassRowSelection<T> | - | Satır seçimi config | | pagination | GlassTablePaginationConfig \| false | - | Sayfalama config | | loading | boolean | false | Yükleniyor durumu | | bordered | boolean | false | Kenarlık göster | | size | "large" \| "middle" \| "small" | "middle" | Tablo boyutu | | showHeader | boolean | true | Header göster | | sticky | boolean \| { offsetHeader?: number } | - | Sticky header | | expandable | GlassExpandable<T> | - | Genişletilebilir satırlar | | toolbar | GlassTableToolbarConfig<T> | - | Araç çubuğu config | | onChange | Function | - | Değişiklik callback |

Toolbar Config

toolbar={{
  search: true | { placeholder: 'Ara...', onSearch: (v) => {} },
  columnChooser: true,
  filters: true,
  density: true,
  fullScreen: true,
  refresh: true | { onRefresh: async () => {} },
  export: {
    formats: ['csv', 'json', 'excel', 'pdf'],
    filename: 'export',
    onExport: (format, data) => {}
  },
  import: { onImport: (data) => {} },
  actions: <CustomActions />,
  position: 'top' | 'bottom' | 'both'
}}

Not: Excel export için xlsx, PDF export için jspdf ve jspdf-autotable paketleri gereklidir.

GlassImage

Resim bileşeni.

import { GlassImage } from '@aliugurlafci/aula-lib'

<GlassImage 
  src="/photo.jpg"
  alt="Fotoğraf"
  preview
/>

GlassSkeleton

Yükleme iskeleti bileşeni.

import { GlassSkeleton } from '@aliugurlafci/aula-lib'

<GlassSkeleton active paragraph={{ rows: 4 }} />

<GlassSkeleton.Avatar active />
<GlassSkeleton.Button active />
<GlassSkeleton.Input active />

GlassStatistics

İstatistik kartları.

import { GlassStatistics } from '@aliugurlafci/aula-lib'

<GlassStatistics
  title="Toplam Satış"
  value={112893}
  precision={2}
  prefix="₺"
  valueStyle={{ color: '#3f8600' }}
/>

<GlassStatistics
  title="Aktif Kullanıcılar"
  value={1128}
  suffix="kişi"
/>

GlassTimeline

Zaman çizelgesi bileşeni.

import { GlassTimeline } from '@aliugurlafci/aula-lib'

<GlassTimeline
  items={[
    { children: 'Sipariş oluşturuldu', color: 'green' },
    { children: 'Ödeme alındı', color: 'green' },
    { children: 'Kargoya verildi', color: 'blue' },
    { children: 'Teslim edildi', color: 'gray', dot: <CheckIcon /> }
  ]}
/>

GlassTreeView

Ağaç görünümü bileşeni.

import { GlassTreeView } from '@aliugurlafci/aula-lib'

<GlassTreeView
  treeData={[
    {
      key: '1',
      title: 'Klasör 1',
      children: [
        { key: '1-1', title: 'Dosya 1' },
        { key: '1-2', title: 'Dosya 2' }
      ]
    }
  ]}
  checkable
  defaultExpandAll
/>

GlassTag

import { GlassTag } from '@aliugurlafci/aula-lib'

<GlassTag color="accent">Yeni</GlassTag>
<GlassTag color="success" appearance="solid" dot>Yayında</GlassTag>
<GlassTag color="error" appearance="outline" closable onClose={() => {}}>Hata</GlassTag>
<GlassTag color="#ec4899" rounded icon={<Star />}>Öne çıkan</GlassTag>
<GlassTag clickable checked={selected} onClick={toggle}>Filtre</GlassTag>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | color | semantik ad veya CSS rengi | "default" | default, accent, success, warning, error, info ya da ham renk | | appearance | "soft" \| "solid" \| "outline" | "soft" | Dolgu biçimi | | size | "small" \| "middle" \| "large" | "middle" | Boyut | | closable | boolean | false | Kapatma butonu | | onClose | (event) => void \| false | - | false dönerse etiket kaldırılmaz | | clickable / checked | boolean | false | Seçilebilir çip davranışı |

GlassAccordion

import { GlassAccordion } from '@aliugurlafci/aula-lib'

<GlassAccordion
  accordion
  defaultActiveKey={['1']}
  items={[
    { key: '1', label: 'Kargo', children: 'Siparişler 2 iş günü içinde kargolanır.', icon: <Truck /> },
    { key: '2', label: 'İade', children: '14 gün içinde koşulsuz iade.', extra: <GlassTag>Yeni</GlassTag> },
  ]}
/>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | items | GlassAccordionItem[] | - | Paneller | | accordion | boolean | false | Aynı anda tek panel açık | | appearance | "separated" \| "contained" \| "ghost" | "separated" | Panel sunumu | | expandIconPosition | "start" \| "end" | "end" | Ok konumu | | destroyInactivePanel | boolean | true | Kapalı paneli DOM'dan kaldır |

GlassDescriptions

Anahtar/değer listesi — detay sayfaları için.

import { GlassDescriptions } from '@aliugurlafci/aula-lib'

<GlassDescriptions
  title="Sipariş bilgisi"
  bordered
  column={{ sm: 1, md: 2, lg: 3 }}
  items={[
    { label: 'Sipariş no', children: '#12983' },
    { label: 'Durum', children: <GlassTag color="success">Tamamlandı</GlassTag> },
    { label: 'Adres', children: 'Kadıköy, İstanbul', span: 2 },
  ]}
/>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | items | GlassDescriptionItem[] | - | Satırlar (span ile kolon birleştirme) | | column | number \| { sm, md, lg } | 3 | Kolon sayısı (responsive) | | layout | "horizontal" \| "vertical" | "horizontal" | Etiket/değer yerleşimi | | bordered | boolean | false | Cam panel ve satır çizgileri |

GlassCarousel

import { GlassCarousel } from '@aliugurlafci/aula-lib'

<GlassCarousel autoPlay interval={5000} dots="bars">
  <img src="/1.jpg" alt="" />
  <img src="/2.jpg" alt="" />
</GlassCarousel>

<GlassCarousel slidesPerView={3} gap={20} loop={false}>
  {products.map((p) => <ProductCard key={p.id} {...p} />)}
</GlassCarousel>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | autoPlay / interval | boolean / number | false / 4000 | Otomatik geçiş | | slidesPerView | number | 1 | Aynı anda görünen slayt | | gap | number | 16 | Slaytlar arası boşluk (px) | | dots | "dots" \| "bars" \| "none" | "dots" | Sayfalama göstergesi | | draggable | boolean | true | Sürükle/kaydır | | pauseOnHover | boolean | true | Fare üzerindeyken durakla |

Sol/sağ ok tuşları ile klavyeden de gezilebilir.

🧭 Navigation Bileşenleri

GlassTabs

Sekme bileşeni.

import { GlassTabs } from '@aliugurlafci/aula-lib'

<GlassTabs
  items={[
    { key: 'profile', label: 'Profil', children: <ProfilePage /> },
    { key: 'settings', label: 'Ayarlar', icon: <SettingsIcon />, children: <SettingsPage /> },
    { key: 'notifications', label: 'Bildirimler', disabled: true }
  ]}
  defaultActiveKey="profile"
  onChange={(key) => console.log(key)}
/>

<GlassTabs
  type="card"
  tabPosition="left"
  items={items}
/>

<GlassTabs
  type="editable-card"
  onEdit={(targetKey, action) => {
    if (action === 'add') addTab()
    else removeTab(targetKey)
  }}
  items={items}
/>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | items | GlassTabItem[] | - | Sekme öğeleri | | activeKey | string | - | Aktif sekme key'i | | defaultActiveKey | string | - | Varsayılan aktif sekme | | tabPosition | "top" \| "right" \| "bottom" \| "left" | "top" | Sekme pozisyonu | | type | "line" \| "card" \| "editable-card" | "line" | Sekme tipi | | size | "small" \| "middle" \| "large" | "middle" | Boyut | | centered | boolean | false | Ortalanmış sekmeler | | animated | boolean \| object | true | Animasyon | | tabBarExtraContent | ReactNode \| object | - | Ekstra içerik | | onChange | (activeKey: string) => void | - | Değişim callback | | onEdit | Function | - | Düzenleme callback |

GlassNavbar

Navigasyon çubuğu.

import { GlassNavbar } from '@aliugurlafci/aula-lib'

<GlassNavbar
  logo={<Logo />}
  items={[
    { key: 'home', label: 'Ana Sayfa', href: '/' },
    { key: 'about', label: 'Hakkında', href: '/about' },
    { 
      key: 'services', 
      label: 'Hizmetler',
      children: [
        { key: 'web', label: 'Web Geliştirme' },
        { key: 'mobile', label: 'Mobil Uygulama' }
      ]
    }
  ]}
  extra={<UserMenu />}
/>

GlassMenu

Menü bileşeni.

import { GlassMenu } from '@aliugurlafci/aula-lib'

<GlassMenu
  mode="vertical"
  items={[
    { key: 'dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
    { key: 'users', label: 'Kullanıcılar', icon: <UsersIcon /> },
    { type: 'divider' },
    { key: 'settings', label: 'Ayarlar', icon: <SettingsIcon /> }
  ]}
  selectedKeys={['dashboard']}
/>

GlassDropdown

Açılır menü bileşeni.

import { GlassDropdown } from '@aliugurlafci/aula-lib'

<GlassDropdown
  menu={{
    items: [
      { key: 'edit', label: 'Düzenle' },
      { key: 'delete', label: 'Sil', danger: true }
    ],
    onClick: ({ key }) => console.log(key)
  }}
  trigger={['click']}
>
  <GlassButton>İşlemler</GlassButton>
</GlassDropdown>

GlassBreadcrumb

import { GlassBreadcrumb } from '@aliugurlafci/aula-lib'

<GlassBreadcrumb
  bordered
  maxItems={4}
  items={[
    { title: 'Ana sayfa', href: '/', icon: <Home size={14} /> },
    { title: 'Ürünler', href: '/products' },
    { title: 'Ayakkabı', href: '/products/shoes' },
    { title: 'Koşu' },
  ]}
/>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | items | GlassBreadcrumbItem[] | - | Kırıntılar | | separator | ReactNode | chevron | Ayırıcı | | maxItems | number | 0 | Bu sayıyı aşınca ortadakiler … altında toplanır (0 = hiç toplama) | | itemRender | (item, isLast) => ReactNode | - | Next.js <Link> gibi özel render |

GlassPagination

import { GlassPagination } from '@aliugurlafci/aula-lib'

<GlassPagination
  total={195}
  defaultPageSize={20}
  showSizeChanger
  showQuickJumper
  showTotal={(total, [from, to]) => `${total} kayıttan ${from}-${to}`}
  onChange={(page, pageSize) => fetchPage(page, pageSize)}
/>

<GlassPagination simple total={80} size="small" />

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | total | number | - | Toplam kayıt | | current / defaultCurrent | number | 1 | Aktif sayfa | | pageSize / defaultPageSize | number | 10 | Sayfa başına kayıt | | siblingCount | number | 1 | Aktif sayfanın iki yanındaki buton sayısı | | simple | boolean | false | Sadece ileri/geri + sayaç | | showSizeChanger / showQuickJumper / showTotal | boolean | false | Ek kontroller | | hideOnSinglePage | boolean | false | Tek sayfada gizle |

GlassSteps

import { GlassSteps } from '@aliugurlafci/aula-lib'

<GlassSteps
  current={1}
  items={[
    { title: 'Sepet', description: '3 ürün' },
    { title: 'Teslimat' },
    { title: 'Ödeme' },
  ]}
/>

<GlassSteps direction="vertical" current={2} status="error"
  items={[{ title: 'Kuyruk' }, { title: 'Derleme' }, { title: 'Dağıtım', description: 'Başarısız' }]} />

<GlassSteps type="dot" current={0} items={[{ title: 'A' }, { title: 'B' }]} />

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | items | GlassStepItem[] | - | Adımlar | | current | number | 0 | Aktif adım (0 tabanlı) | | status | "wait" \| "process" \| "finish" \| "error" | "process" | Aktif adımın durumu | | direction | "horizontal" \| "vertical" | "horizontal" | Yerleşim | | type | "default" \| "dot" \| "navigation" | "default" | Gösterge biçimi | | clickable | boolean | false | Adımlara tıklanabilir | | labelPlacement | "horizontal" \| "vertical" | "horizontal" | Etiket konumu |

💬 Feedback Bileşenleri

GlassAlert

Uyarı mesajı bileşeni.

import { GlassAlert } from '@aliugurlafci/aula-lib'

<GlassAlert
  type="success"
  message="Başarılı!"
  description="İşlem tamamlandı."
  showIcon
  closable
/>

<GlassAlert
  type="error"
  message="Hata"
  description="Bir sorun oluştu."
  action={<GlassButton size="small">Tekrar Dene</GlassButton>}
/>

<GlassAlert banner type="warning" message="Dikkat!" />

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | type | "success" \| "error" \| "info" \| "warning" | "info" | Alert tipi | | message | ReactNode | - | Başlık mesajı | | description | ReactNode | - | Detay açıklama | | icon | ReactNode | - | Özel ikon | | showIcon | boolean | false | İkon göster | | closable | boolean | false | Kapatılabilir | | closeIcon | ReactNode | - | Özel kapatma ikonu | | banner | boolean | false | Banner stili | | action | ReactNode | - | Aksiyon butonu | | onClose | (e: MouseEvent) => void | - | Kapatma callback | | afterClose | () => void | - | Kapandıktan sonra callback |

GlassMessage

Bildirim mesajları.

import { GlassMessage } from '@aliugurlafci/aula-lib'

GlassMessage.success('İşlem başarılı!')
GlassMessage.error('Bir hata oluştu')
GlassMessage.warning('Dikkat!')
GlassMessage.info('Bilgi mesajı')
GlassMessage.loading('Yükleniyor...')

GlassPopover

Popover bileşeni.

import { GlassPopover } from '@aliugurlafci/aula-lib'

<GlassPopover
  title="Detaylar"
  content={<div>Popover içeriği</div>}
  trigger="click"
>
  <GlassButton>Tıkla</GlassButton>
</GlassPopover>

GlassTooltip

@floating-ui tabanlı, otomatik konumlanan ipucu. Ters yüzey rengi kullandığı için her iki temada da sayfadan ayrışır.

import { GlassTooltip } from '@aliugurlafci/aula-lib'

<GlassTooltip title="Panoya kopyala" placement="top">
  <GlassButton icon={<Copy />} shape="circle" />
</GlassTooltip>

<GlassTooltip title="Tıklayınca açılır" trigger="click" mouseEnterDelay={0.3}>
  <span>Detay</span>
</GlassTooltip>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | title | ReactNode | - | İçerik. Boşsa hiçbir şey render edilmez | | placement | Placement | "top" | Tercih edilen yön; yer yoksa otomatik döner | | trigger | "hover" \| "focus" \| "click" | "hover" | Açılma tetikleyicisi | | mouseEnterDelay / mouseLeaveDelay | number (saniye) | 0.1 | Gecikmeler | | arrow | boolean | true | Ok göster |

Klavye odağıyla da açılır (trigger="click" hariç) — erişilebilirlik için önemlidir.

Not: Önceki sürümlerde GlassTooltip, GlassPopover üzerine ince bir sarmalayıcıydı. Artık bağımsız bir bileşendir; title, placement, trigger, arrow, mouseEnterDelay/mouseLeaveDelay prop'ları aynı şekilde çalışır.

GlassProgress

import { GlassProgress } from '@aliugurlafci/aula-lib'

<GlassProgress percent={72} />
<GlassProgress percent={72} status="active" />
<GlassProgress indeterminate />
<GlassProgress steps={5} percent={60} />
<GlassProgress type="circle" percent={88} size={140} />
<GlassProgress type="dashboard" percent={45} gapDegree={90} />
<GlassProgress percent={64} strokeColor={{ from: '#8b5cf6', to: '#06b6d4' }} />

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | type | "line" \| "circle" \| "dashboard" | "line" | Gösterge biçimi | | percent | number | 0 | 0-100 arası tamamlanma | | indeterminate | boolean | false | Süresi bilinmeyen işlem animasyonu | | status | "normal" \| "active" \| "success" \| "warning" \| "error" | "normal" | Renk; active hareketli parıltı ekler | | steps | number | - | Çizgiyi eşit parçalara böler | | strokeColor | string \| { from, to } | - | Sabit renk veya gradyan | | format | (percent) => ReactNode | - | Özel etiket |

GlassSpinner

import { GlassSpinner } from '@aliugurlafci/aula-lib'

<GlassSpinner indicator="ring" size="large" tip="Yükleniyor…" />
<GlassSpinner indicator="dots" />

{/* İçeriği sarmalayıp üzerine bindirir */}
<GlassSpinner spinning={isLoading}>
  <GlassTable columns={columns} dataSource={rows} />
</GlassSpinner>

<GlassSpinner fullscreen spinning={isNavigating} />

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | indicator | "ring" \| "dots" \| "bars" \| "pulse" | "ring" | Gösterge biçimi | | size | "small" \| "middle" \| "large" \| number | "middle" | Boyut | | spinning | boolean | true | Aktiflik | | delay | number | 0 | Hızlı yüklemelerde titremeyi önleyen gecikme (ms) | | fullscreen | boolean | false | Tüm ekranı kaplayan katman |

GlassEmpty

import { GlassEmpty } from '@aliugurlafci/aula-lib'

<GlassEmpty
  image="search"
  description="Sonuç bulunamadı"
  hint="Farklı bir arama terimi deneyin."
  action={<GlassButton buttonType="primary">Filtreleri temizle</GlassButton>}
  bordered
/>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | image | "default" \| "search" \| "simple" \| ReactNode | "default" | Görsel | | description / hint | ReactNode | "No data" / - | Metinler | | action | ReactNode | - | Eylem butonu | | bordered | boolean | false | Cam panel içine al |

GlassResult

import { GlassResult } from '@aliugurlafci/aula-lib'

<GlassResult
  status="success"
  title="Ödeme alındı"
  subTitle="Sipariş numaranız #12983."
  extra={<GlassButton buttonType="primary">Siparişi görüntüle</GlassButton>}
/>

<GlassResult status="404" extra={<GlassButton>Ana sayfa</GlassButton>} />

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | status | "success" \| "error" \| "info" \| "warning" \| "403" \| "404" \| "500" | "info" | İkon ve renk | | title / subTitle | ReactNode | duruma göre | Metinler | | extra | ReactNode | - | Eylemler | | children | ReactNode | - | Detay paneli (hata dökümü vb.) |

📐 Layout Bileşenleri

GlassModal

Modal pencere bileşeni.

import { GlassModal } from '@aliugurlafci/aula-lib'

const [open, setOpen] = useState(false)

<GlassButton onClick={() => setOpen(true)}>Modal Aç</GlassButton>

<GlassModal
  open={open}
  title="Modal Başlığı"
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
  okText="Kaydet"
  cancelText="İptal"
  confirmLoading={saving}
>
  Modal içeriği
</GlassModal>

// Programatik kullanım
GlassModal.confirm({
  title: 'Emin misiniz?',
  content: 'Bu işlem geri alınamaz.',
  onOk: async () => { await deleteItem() }
})

GlassModal.success({ title: 'Başarılı', content: 'İşlem tamamlandı.' })

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | open | boolean | - | Modal görünürlüğü | | title | ReactNode | - | Modal başlığı | | footer | ReactNode \| null | - | Alt kısım (null = gizle) | | closable | boolean | true | Kapatma butonu | | mask | boolean | true | Arkaplan maskesi | | maskClosable | boolean | true | Maskeye tıklayınca kapat | | centered | boolean | false | Ekran ortasında | | width | number \| string | 520 | Modal genişliği | | destroyOnClose | boolean | false | Kapanınca DOM'dan kaldır | | okText | ReactNode | "OK" | Onay butonu metni | | cancelText | ReactNode | "Cancel" | İptal butonu metni | | confirmLoading | boolean | false | Onay butonu yükleniyor | | onOk | (e: MouseEvent) => void | - | Onay callback | | onCancel | (e: MouseEvent) => void | - | İptal callback | | afterClose | () => void | - | Kapandıktan sonra callback | | zIndex | number | - | Z-index değeri |

GlassLayout

Sayfa düzeni bileşeni.

import { GlassLayout } from '@aliugurlafci/aula-lib'

const { Header, Sider, Content, Footer } = GlassLayout

<GlassLayout>
  <Header>Header</Header>
  <GlassLayout>
    <Sider collapsible>Sidebar</Sider>
    <Content>Ana İçerik</Content>
  </GlassLayout>
  <Footer>Footer</Footer>
</GlassLayout>

GlassSegmented

Segmented kontrol bileşeni.

import { GlassSegmented } from '@aliugurlafci/aula-lib'

<GlassSegmented
  options={['Günlük', 'Haftalık', 'Aylık']}
  value={period}
  onChange={setPeriod}
/>

<GlassSegmented
  options={[
    { label: 'Liste', value: 'list', icon: <ListIcon /> },
    { label: 'Grid', value: 'grid', icon: <GridIcon /> }
  ]}
/>

GlassDrawer

import { GlassDrawer } from '@aliugurlafci/aula-lib'

<GlassDrawer
  open={open}
  onClose={() => setOpen(false)}
  placement="right"
  title="Filtreler"
  size={420}
  footer={
    <div className="flex justify-end gap-2">
      <GlassButton onClick={() => setOpen(false)}>Vazgeç</GlassButton>
      <GlassButton buttonType="primary" onClick={apply}>Uygula</GlassButton>
    </div>
  }
>
  <FilterForm />
</GlassDrawer>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | open | boolean | - | Görünürlük (kontrollü) | | placement | "left" \| "right" \| "top" \| "bottom" | "right" | Açılma yönü | | size | number \| string | min(28rem, 100vw) | Genişlik/yükseklik | | mask / maskClosable | boolean | true | Perde ve perdeye tıklayınca kapanma | | keyboard | boolean | true | Escape ile kapat | | footer / extra | ReactNode | - | Alt/üst ek alanlar | | destroyOnClose | boolean | true | Kapalıyken içeriği kaldır |

Açıldığında odak panele taşınır, kapanınca önceki elemana geri döner; perde açıkken sayfa kaydırması kilitlenir.

GlassDivider

import { GlassDivider } from '@aliugurlafci/aula-lib'

<GlassDivider />
<GlassDivider>veya</GlassDivider>
<GlassDivider orientation="left" appearance="dashed">Ayarlar</GlassDivider>
<GlassDivider appearance="gradient" spacing="large" />

<div className="flex h-6 items-center">
  <span>Düzenle</span>
  <GlassDivider direction="vertical" />
  <span>Sil</span>
</div>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | direction | "horizontal" \| "vertical" | "horizontal" | Yön | | appearance | "solid" \| "dashed" \| "dotted" \| "gradient" | "solid" | Çizgi stili | | orientation | "left" \| "center" \| "right" | "center" | Etiket konumu | | spacing | "none" \| "small" \| "middle" \| "large" | "middle" | Boşluk |

GlassSpace

Esnek boşluk yardımcısı.

import { GlassSpace } from '@aliugurlafci/aula-lib'

<GlassSpace size="middle">
  <GlassButton>Kaydet</GlassButton>
  <GlassButton>Vazgeç</GlassButton>
</GlassSpace>

<GlassSpace direction="vertical" size={[8, 16]} block>
  <GlassCard>Bir</GlassCard>
  <GlassCard>İki</GlassCard>
</GlassSpace>

<GlassSpace split={<GlassDivider direction="vertical" />}>
  <a href="#">Düzenle</a>
  <a href="#">Sil</a>
</GlassSpace>

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | direction | "horizontal" \| "vertical" | "horizontal" | Yön | | size | "none" \| "xs" \| "small" \| "middle" \| "large" \| "xl" \| number \| [x, y] | "small" | Boşluk | | align / justify | flex değerleri | - | Hizalama | | split | ReactNode | - | Öğeler arasına eklenecek node | | wrap / block | boolean | false | Satır kaydırma / tam genişlik |

GlassTypography

import { GlassTypography } from '@aliugurlafci/aula-lib'

const { Title, Text, Paragraph, Link } = GlassTypography

<Title level={1} gradient>Aula UI</Title>
<Paragraph relaxed tone="secondary" ellipsis={3}>
  Uzun açıklama metni…
</Paragraph>
<Text code>npm install</Text>
<Text mark>vurgulu</Text>
<Text keyboard>Ctrl+K</Text>
<Link href="https://example.com" external>Dokümantasyon</Link>

Bileşenler ayrıca tek tek de dışa aktarılır: GlassTitle, GlassText, GlassParagraph, GlassLink.

| Ortak prop | Tip | Açıklama | |------------|-----|----------| | tone | "primary" \| "secondary" \| "muted" \| "accent" \| "success" \| "warning" \| "error" | Metin rengi rolü | | align | "left" \| "center" \| "right" \| "justify" | Hizalama | | ellipsis | boolean \| number | Tek satır kırpma veya N satır clamp |

📋 Form Bileşeni

GlassForm

Form yönetimi bileşeni (react-hook-form ile).

Not: GlassForm ayrı bir entry point'ten import edilmelidir: @aliugurlafci/aula-lib/form

// GlassForm için ayrı import gerekli!
import { GlassForm, GlassFormItem, useGlassForm } from '@aliugurlafci/aula-lib/form'
import { GlassInput, GlassButton } from '@aliugurlafci/aula-lib'

const form = useGlassForm()

<GlassForm
  form={form}
  layout="vertical"
  onFinish={(values) => console.log(values)}
>
  <GlassFormItem 
    name="email" 
    label="E-posta"
    rules={[
      { required: true, message: 'E-posta gerekli' },
      { type: 'email', message: 'Geçerli e-posta girin' }
    ]}
  >
    <GlassInput placeholder="[email protected]" />
  </GlassFormItem>
  
  <GlassFormItem 
    name="password" 
    label="Şifre"
    rules={[{ required: true, min: 6 }]}
  >
    <GlassInput type="password" />
  </GlassFormItem>
  
  <GlassButton type="submit" buttonType="primary">
    Giriş Yap
  </GlassButton>
</GlassForm>

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | form | UseFormReturn<T> | - | react-hook-form instance | | layout | "horizontal" \| "vertical" \| "inline" | "horizontal" | Form düzeni | | labelCol | { span?: number; offset?: number } | - | Etiket kolon ayarı | | wrapperCol | { span?: number; offset?: number } | - | İçerik kolon ayarı | | labelAlign | "left" \| "right" | "right" | Etiket hizalama | | colon | boolean | true | Etiket sonrası ":" | | requiredMark | boolean \| "optional" | true | Zorunlu işareti | | size | "small" \| "middle" \| "large" | "middle" | Form boyutu | | disabled | boolean | false | Form devre dışı | | onFinish | (values: T) => void | - | Başarılı submit callback | | onFinishFailed | Function | - | Hatalı submit callback |

Not: GlassForm için react-hook-form gereklidir: npm install react-hook-form Zod schema validation için: npm install @hookform/resolvers zod

🎬 Media Bileşenleri

GlassMusicPlayer

Müzik oynatıcı bileşeni.

import { GlassMusicPlayer } from '@aliugurlafci/aula-lib'

<GlassMusicPlayer
  src="/music.mp3"
  title="Şarkı Adı"
  artist="Sanatçı"
  cover="/album-cover.jpg"
/>

GlassVideoPlayer

Video oynatıcı bileşeni.

import { GlassVideoPlayer } from '@aliugurlafci/aula-lib'

// Normal video
<GlassVideoPlayer src="/video.mp4" poster="/poster.jpg" />

// HLS streaming (hls.js gerektirir)
<GlassVideoPlayer 
  src="https://example.com/stream.m3u8" 
  streamType="hls"
/>

// DASH streaming (dashjs gerektirir)
<GlassVideoPlayer 
  src="https://example.com/stream.mpd" 
  streamType="dash"
/>

Not: HLS streaming için hls.js, DASH streaming için dashjs paketi gereklidir. Paket yüklü değilse native HTML5 video fallback'i kullanılır.

🎨 Tema Özelleştirme

`variant` prop'u

Her bileşen üç görsel varyant kabul eder:

| Variant | Davranış | |---------|----------| | auto (varsayılan) | Sabit renk taşımaz; yüzey, kenarlık ve metin renklerini CSS değişkenlerinden okur. Aktif data-theme ne ise ona uyar. | | light | Bileşeni tema fark etmeksizin açık görünüme sabitler. | | dark | Bileşeni tema fark etmeksizin koyu görünüme sabitler. |

<GlassCard>Temayı izler</GlassCard>
<GlassCard variant="dark">Her zaman koyu (örn. medya üzerinde)</GlassCard>

CSS değişkenleri

Tüm tasarım tokenları --aula- önekli CSS değişkenleridir. Kendi değerlerinizi vererek tüm kütüphaneyi yeniden markalayabilirsiniz:

:root {
  /* Yüzey */
  --aula-glass-bg: rgba(255, 255, 255, 0.55);
  --aula-glass-border: rgba(15, 18, 40, 0.12);
  --aula-glass-highlight: rgba(255, 255, 255, 0.75);
  --aula-overlay-bg: rgba(252, 253, 255, 0.9);   /* dropdown, modal, drawer */
  --aula-surface-inverse: rgba(20, 22, 38, 0.94); /* tooltip */

  /* Etkileşim dolguları */
  --aula-fill-subtle: rgba(15, 18, 40, 0.04);
  --aula-fill: rgba(15, 18, 40, 0.07);
  --aula-fill-strong: rgba(15, 18, 40, 0.12);

  /* Metin */
  --aula-text-primary: rgba(17, 19, 34, 0.94);
  --aula-text-secondary: rgba(17, 19, 34, 0.68);
  --aula-text-muted: rgba(17, 19, 34, 0.46);

  /* Vurgu ve durum */
  --aula-accent-primary: #7c3aed;
  --aula-accent-rgb: 139 92 246;   /* kendi alfalarınızı kurmak için */
  --aula-success: #059669;
  --aula-warning: #d97706;
  --aula-error: #dc2626;
  --aula-info: #2563eb;

  /* Blur, yarıçap, hareket */
  --aula-blur-md: 10px;
  --aula-saturate: 180%;
  --aula-radius-md: 12px;
  --aula-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="dark"] {
  --aula-glass-bg: rgba(255, 255, 255, 0.06);
  --aula-glass-border: rgba(255, 255, 255, 0.12);
  --aula-text-primary: rgba(255, 255, 255, 0.95);
  --aula-accent-primary: #a78bfa;
}

Tailwind yardımcı sınıfları

styles.css bu tokenları Tailwind v4'e @theme inline ile kaydeder, böylece kendi kodunuzda da kullanabilirsiniz:

<div className="bg-glass border border-glass-border text-aula-primary rounded-glass shadow-glass">
  <span className="text-aula-muted">yardımcı metin</span>
  <button className="hover:bg-fill text-accent">eylem</button>
</div>

| Grup | Sınıflar | |------|---------| | Yüzey | bg-glass, bg-glass-hover, bg-glass-subtle, bg-overlay, bg-inverse-surface | | Dolgu | bg-fill-subtle, bg-fill, bg-fill-strong | | Metin | text-aula-primary, text-aula-secondary, text-aula-muted, text-aula-inverse | | Vurgu | text-accent, bg-accent, border-accent | | Durum | text-status-success, text-status-warning, text-status-error, text-status-info | | Kenarlık | border-glass-border | | Yarıçap | rounded-glass-sm, rounded-glass, rounded-glass-lg, rounded-glass-xl | | Gölge | shadow-glass-sm, shadow-glass, shadow-glass-lg, shadow-glass-xl, shadow-glass-glow |

Cam ilkelleri (CSS sınıfları)

Kendi bileşenlerinizde de aynı cam yüzeyi kullanabilirsiniz:

<div className="glass glass-lg glass-hoverable rounded-2xl p-6">
  Özel cam panel
</div>

| Sınıf | Açıklama | |-------|----------| | glass | Temel cam yüzey: arka plan, specular sheen, kenarlık, gölge, üst ışık çizgisi | | glass-none … glass-2xl | Blur yoğunluğu | | glass-hoverable | Hover'da yükselme + parlaklaşma | | glass-glow | Accent renginde dış parıltı | | aula-backdrop | Camın kırılması için ortam mesh arka planı | | aula-scrollbar | İnce, tema uyumlu kaydırma çubuğu | | aula-shimmer | Yükleniyor parıltısı |

glass sınıfı components cascade layer'ında tanımlanır; Tailwind yardımcıları (bg-*, rounded-*, shadow-*) her zaman üzerine yazar. Specular sheen background-image olduğu için bg-* renkleriyle korunur.

📖 TypeScript Desteği

Tüm bileşenler için tip tanımları:

import type { 
  // Core
  GlassButtonProps,
  GlassCardProps,
  GlassAvatarProps,
  GlassAvatarGroupProps,
  GlassBadgeProps,
  GlassBadgeRibbonProps,
  GlassFloatingButtonProps,
  
  // Data Entry
  GlassInputProps,
  GlassTextAreaProps,
  GlassSelectProps,
  GlassSelectOption,
  GlassSwitchProps,
  GlassCheckboxProps,
  GlassCheckboxGroupProps,
  GlassRadioProps,
  GlassRadioGroupProps,
  GlassSliderProps,
  GlassSliderMark,
  GlassRateProps,
  GlassUploadProps,
  GlassUploadFile,
  GlassNumberInputProps,
  GlassDatePickerProps,
  GlassColorPickerProps,
  GlassTransferProps,
  
  // Data Display
  GlassTableProps,
  GlassColumnType,
  GlassRowSelection,
  GlassExpandable,
  GlassTableToolbarConfig,
  GlassImageProps,
  GlassSkeletonProps,
  GlassStatisticsProps,
  GlassTimelineProps,
  GlassTreeViewProps,
  GlassTagProps,
  GlassAccordionProps,
  GlassAccordionItem,
  GlassDescriptionsProps,
  GlassDescriptionItem,
  GlassCarouselProps,
  
  // Navigation
  GlassTabsProps,
  GlassTabItem,
  GlassNavbarProps,
  GlassMenuProps,
  GlassDropdownProps,
  GlassBreadcrumbProps,
  GlassBreadcrumbItem,
  GlassPaginationProps,
  GlassStepsProps,
  GlassStepItem,
  
  // Feedback
  GlassAlertProps,
  GlassMessageProps,
  GlassPopoverProps,
  GlassTooltipProps,
  GlassProgressProps,
  GlassSpinnerProps,
  GlassEmptyProps,
  GlassResultProps,
  
  // Layout
  GlassModalProps,
  GlassLayoutProps,
  GlassSegmentedProps,
  GlassDrawerProps,
  GlassDividerProps,
  GlassSpaceProps,
  GlassTitleProps,
  GlassTextProps,
  GlassParagraphProps,
  GlassLinkProps,
  
  // Form
  GlassFormProps,
  GlassFormItemProps,
  
  // Media
  GlassMusicPlayerProps,
  GlassVideoPlayerProps,
  
  // Theme
  ThemeVariant,
  ThemeMode,
  GlassVariant,
  GlassTheme,
  BlurSize,
  ShadowSize
} from '@aliugurlafci/aula-lib'

🤝 Katkıda Bulunma

Katkılarınızı bekliyoruz! Lütfen bir PR açmadan önce issue oluşturun.

📄 Lisans

MIT License - Detaylar için LICENSE dosyasına bakın.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Aula UI Library

✨ Özellikler

📦 Kurulum

Gerekli Peer Dependencies

Opsiyonel Peer Dependencies

🚀 Hızlı Başlangıç

1. Tailwind CSS v4 Kurulumu (Önerilen)

2. CSS Import

3. Bileşenleri Kullanın

4. Next.js App Router ile Kullanım

🔧 Providers & Hooks

ThemeProvider

Props

ThemeScript

useGlassTheme

Dönen Değerler

useGlassStyle

Options

📚 Core Bileşenler

GlassButton

Props

GlassCard

Props

GlassAvatar

Props

GlassBadge

Props

GlassFloatingButton

📝 Data Entry Bileşenleri

GlassInput

Props

GlassSelect

Props

GlassSwitch

GlassDatePicker

GlassColorPicker

GlassNumberInput

GlassTransfer

GlassCheckbox

GlassRadio

GlassSlider

GlassRate

GlassUpload

📊 Data Display Bileşenleri

GlassTable

Props

Toolbar Config

GlassImage

GlassSkeleton

GlassStatistics

GlassTimeline

GlassTreeView

GlassTag

GlassAccordion

GlassDescriptions

GlassCarousel

🧭 Navigation Bileşenleri

GlassTabs

Props

GlassNavbar

GlassMenu

GlassDropdown

GlassBreadcrumb

GlassPagination

GlassSteps

💬 Feedback Bileşenleri

GlassAlert

Props

GlassMessage

GlassPopover

GlassTooltip

GlassProgress

GlassSpinner

GlassEmpty

`variant` prop'u