@sarunyu/system-one 4.3.0 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,7 +11,7 @@ export type CardSocialTag = {
11
11
  text?: string;
12
12
  };
13
13
  export interface CardProps {
14
- /** Card type: "event" (default), "default" (empty shell for custom content), "news", "social", or "live". */
14
+ /** Card type. Default: `"default"` an empty shell with padding + radius. Switch to `"event"`, `"news"`, `"social"`, or `"live"` only when rendering that specific content pattern. */
15
15
  variant?: CardVariant;
16
16
  /** Custom body content (`variant="default"`). */
17
17
  children?: ReactNode;
@@ -1 +1 @@
1
- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC3E,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG,YAAY,GAAG,MAAM,CAAC;AAErE,kDAAkD;AAClD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kFAAkF;IAClF,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,SAAS,CAAC,EAAE,aAAa,CAAC;IAG1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAG9B,gEAAgE;IAChE,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAqID,eAAO,MAAM,IAAI,sGAyZf,CAAC"}
1
+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC3E,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG,YAAY,GAAG,MAAM,CAAC;AAErE,kDAAkD;AAClD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,wLAAwL;IACxL,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kFAAkF;IAClF,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,SAAS,CAAC,EAAE,aAAa,CAAC;IAG1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAG9B,gEAAgE;IAChE,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAwJD,eAAO,MAAM,IAAI,sGAwYf,CAAC"}
package/llms.txt CHANGED
@@ -420,26 +420,57 @@ All tabs in one group must share the same size.
420
420
 
421
421
  ### Card
422
422
 
423
- Event/content card. Self-contained — don't wrap in another card.
423
+ Self-contained surface — don't wrap in another card.
424
+
425
+ **Default variant is `"default"`.** Start every Card as `variant="default"` (an empty shell with padding, radius, shadow, and `bg-card`) and pass your content via `children`. Only switch to a specialized variant when the page is specifically rendering that content type.
426
+
427
+ | Variant | Use for | Requires |
428
+ |---|---|---|
429
+ | `"default"` (default) | Any custom card surface | `children` |
430
+ | `"event"` | Event/session card | `title`, `date`, `time`, `location`, `count`, `tagStatus` |
431
+ | `"news"` | News/article card | `title`, `category`, `date`, optional `image` |
432
+ | `"social"` | Social/article summary with colored tag chips | `title`, `tags`, `source`, `date` |
433
+ | `"live"` | Live stream / video card with duration overlay | `title`, `source`, `date`, `duration` |
424
434
 
425
435
  ```tsx
436
+ // Default — custom content (preferred starting point)
437
+ <Card size="desktop" className="w-[308px]">
438
+ <h4>Custom title</h4>
439
+ <p className="text-sm text-muted-foreground">Any layout you want inside.</p>
440
+ </Card>
441
+
442
+ // Event
426
443
  <Card
427
- variant="desktop"
444
+ variant="event"
445
+ size="desktop"
446
+ image="/banner.jpg"
428
447
  title="Annual Conference 2024"
429
- date="Jun 23, 2024"
430
- time="08:30 12:00"
448
+ date="23 มิ.ย. 2567"
449
+ time="08.30 - 12.00"
431
450
  location="Main Hall, Floor 7"
432
451
  count="150/200"
433
452
  tagStatus="registered"
434
- image="/banner.jpg"
453
+ />
454
+
455
+ // News
456
+ <Card
457
+ variant="news"
458
+ size="desktop"
459
+ image="/cover.jpg"
460
+ category="Market"
461
+ title="Great design begins with understanding user needs"
462
+ date="01 มกราคม 2025"
463
+ bookmarked={bm}
464
+ onBookmarkToggle={toggle}
435
465
  />
436
466
  ```
437
467
 
438
- Variants set width: `desktop` (308px) · `tablet` (224px) · `mobile` (163px).
439
- Pick based on viewport breakpoint, not aesthetic.
468
+ **Size presets set width:** `desktop` (308px) · `tablet` (224px) · `mobile` (163px). Pick based on viewport breakpoint, not aesthetic. The `"default"` variant uses `size` only for its internal padding / radius — set width yourself via `className`.
440
469
 
441
470
  `tagStatus`: `"not-registered"` | `"registered"` | `"full"`.
442
471
 
472
+ When no `image` is provided on `event` / `news` / `social` / `live`, the banner area renders a neutral placeholder (no broken-image icon).
473
+
443
474
  ### Table
444
475
 
445
476
  Data tables. Compose with TableRow + TableHeaderCell + TableCell.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sarunyu/system-one",
3
- "version": "4.3.0",
3
+ "version": "4.4.1",
4
4
  "type": "module",
5
5
  "description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
6
6
  "keywords": [