@shuriken-ui/tailwind 0.0.2 → 0.0.3

package/README.md

@@ -0,0 +1,53 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/3911343/232132279-8d8bf0ad-b1d7-4802-984e-a696763dc6cd.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/3911343/232132309-62971744-dcdb-429c-aa93-6ba0c1caac42.png">
+    <img alt="Shuriken UI logo" src="https://user-images.githubusercontent.com/3911343/232132309-62971744-dcdb-429c-aa93-6ba0c1caac42.png">
+  </picture>
+</p>
+
+
+<p align="center">
+  <a href="https://cssninja.io" title="Our official website">by <strong>cssninja.io</strong></a>
+</p>
+
+---
+
+## Shuriken UI - Tailwind CSS 
+
+Shuriken UI is a free and open-source Tailwind CSS UI Kit. It is a collection of components and templates that you can use to build your next Tailwind CSS project.
+
+This package contains the Tailwind CSS preset, components, and shared utils like custom colors used in Shuriken UI.
+
+## Installation
+
+```bash
+pnpm install -D @shuriken-ui/tailwind
+```
+
+## Usage
+
+The simplest way to register Shuriken UI is to use `withShurikenUI` helper function.
+
+```ts
+// tailwind.config.ts
+import { withShurikenUI } from '@shuriken-ui/tailwind'
+
+export default withShurikenUI({
+  // your config
+})
+```
+
+
+You can also direcly import the preset and use it in your config.
+
+```ts
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+import preset from '@shuriken-ui/tailwind/preset'
+
+export default {
+  presets: [shurikenUIPreset],
+  // your config
+} satisfies Config
+```

package/dist/config.d.ts

@@ -18,10 +18,10 @@ declare const _default: {
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {

package/dist/index.d.ts

@@ -18,10 +18,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {
@@ -235,10 +235,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {
@@ -450,10 +450,10 @@ declare function withShurikenUI(userConfig: Config): Omit<Config, "presets" | "c
         })[];
         theme: {
             fontFamily: {
-                sans: [string, string];
-                heading: [string, string];
-                alt: [string, string];
-                mono: [string, string];
+                sans: string[];
+                heading: string[];
+                alt: string[];
+                mono: string[];
             };
             extend: {
                 colors: {

package/dist/preset.cjs

@@ -164,16 +164,42 @@ const shurikenUIComponents = plugin__default.withOptions(
   }
 );
 
+const sansSystemFont = [
+  "ui-sans-serif",
+  "system-ui",
+  "-apple-system",
+  "BlinkMacSystemFont",
+  '"Segoe UI"',
+  "Roboto",
+  '"Helvetica Neue"',
+  "Arial",
+  '"Noto Sans"',
+  "sans-serif",
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+  '"Noto Color Emoji"'
+];
+const monoSystemFont = [
+  "ui-monospace",
+  "SFMono-Regular",
+  "Menlo",
+  "Monaco",
+  "Consolas",
+  '"Liberation Mono"',
+  '"Courier New"',
+  "monospace"
+];
 const shurikenUIPreset = {
   darkMode: "class",
   content: [],
   plugins: [typography__default, aspectRatio__default, shurikenUIComponents],
   theme: {
     fontFamily: {
-      sans: ["Roboto Flex", "sans-serif"],
-      heading: ["Inter", "sans-serif"],
-      alt: ["Karla", "sans-serif"],
-      mono: ["ui-monospace", "monospace"]
+      sans: sansSystemFont,
+      heading: sansSystemFont,
+      alt: sansSystemFont,
+      mono: monoSystemFont
     },
     extend: {
       colors: {

package/dist/preset.d.ts

@@ -16,10 +16,10 @@ declare const _default: {
     })[];
     theme: {
         fontFamily: {
-            sans: [string, string];
-            heading: [string, string];
-            alt: [string, string];
-            mono: [string, string];
+            sans: string[];
+            heading: string[];
+            alt: string[];
+            mono: string[];
         };
         extend: {
             colors: {

package/dist/preset.mjs

@@ -155,16 +155,42 @@ const shurikenUIComponents = plugin.withOptions(
   }
 );
 
+const sansSystemFont = [
+  "ui-sans-serif",
+  "system-ui",
+  "-apple-system",
+  "BlinkMacSystemFont",
+  '"Segoe UI"',
+  "Roboto",
+  '"Helvetica Neue"',
+  "Arial",
+  '"Noto Sans"',
+  "sans-serif",
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+  '"Noto Color Emoji"'
+];
+const monoSystemFont = [
+  "ui-monospace",
+  "SFMono-Regular",
+  "Menlo",
+  "Monaco",
+  "Consolas",
+  '"Liberation Mono"',
+  '"Courier New"',
+  "monospace"
+];
 const shurikenUIPreset = {
   darkMode: "class",
   content: [],
   plugins: [typography, aspectRatio, shurikenUIComponents],
   theme: {
     fontFamily: {
-      sans: ["Roboto Flex", "sans-serif"],
-      heading: ["Inter", "sans-serif"],
-      alt: ["Karla", "sans-serif"],
-      mono: ["ui-monospace", "monospace"]
+      sans: sansSystemFont,
+      heading: sansSystemFont,
+      alt: sansSystemFont,
+      mono: monoSystemFont
     },
     extend: {
       colors: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
   "repository": "shuriken-ui/tailwind",