strivui 1.0.2 → 1.0.4

package/app/component/blocks.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, AnchorHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  children?: ReactNode;
+};
+
+const Button = ({ children, ...props }: ButtonProps) => {
+  return <button {...props}>{children}</button>;
+};
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+const Input = (props: InputProps) => {
+  return <input {...props} />;
+};
+
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  children?: ReactNode;
+};
+
+const Anchor = ({ children, ...props }: AnchorProps) => {
+  return <a {...props}>{children}</a>;
+};
+
+type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  children?: ReactNode;
+};
+
+const TextArea = ({ children, ...props }: TextAreaProps) => {
+  return <textarea {...props}>{children}</textarea>;
+};
+
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+  children?: ReactNode;
+};
+
+const Select = ({ children, ...props }: SelectProps) => {
+  return <select {...props}>{children}</select>;
+};
+
+export { Button, Input, Anchor, TextArea, Select };

package/app/component/ui.tsx

@@ -0,0 +1,75 @@
+import React, { ReactNode, TableHTMLAttributes, HTMLAttributes } from "react";
+
+type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+  children?: ReactNode;
+};
+
+const Table = ({ children, ...props }: TableProps) => {
+  return <table {...props}>{children}</table>;
+};
+
+type TableHeadProps = HTMLAttributes<HTMLTableSectionElement> & {
+  children?: ReactNode;
+};
+
+const TableHead = ({ children, ...props }: TableHeadProps) => {
+  return <thead {...props}>{children}</thead>;
+};
+
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
+  children?: ReactNode;
+};
+
+const TableBody = ({ children, ...props }: TableBodyProps) => {
+  return <tbody {...props}>{children}</tbody>;
+};
+
+type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+  children?: ReactNode;
+};
+
+const TableRow = ({ children, ...props }: TableRowProps) => {
+  return <tr {...props}>{children}</tr>;
+};
+
+type TableHeaderCellProps = React.ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+  children?: ReactNode;
+};
+
+const TableHeaderCell = ({ children, ...props }: TableHeaderCellProps) => {
+  return <th {...props}>{children}</th>;
+};
+
+type TableDataCellProps = React.TdHTMLAttributes<HTMLTableDataCellElement> & {
+  children?: ReactNode;
+};
+
+const TableDataCell = ({ children, ...props }: TableDataCellProps) => {
+  return <td {...props}>{children}</td>;
+};
+
+type ContainerProps = HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode;
+};
+
+const Container = ({ children, ...props }: ContainerProps) => {
+  return <div {...props}>{children}</div>;
+};
+
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode;
+};
+const Card = ({ children, ...props }: CardProps) => {
+  return <div {...props}>{children}</div>;
+};
+
+export {
+  Card,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableDataCell,
+  Container
+};

package/app/genrate-css/generate-css.js

@@ -0,0 +1,34 @@
+const fs = require("fs");
+const path = require("path");
+
+const inputFiles = ["./example.html", "./example.tsx"]; // replace with your files
+let css = "/* === StriveUI Utility CSS === */\n\n";
+
+/* Static Utility Examples */
+css += `.bg-primary { background-color: #2563eb; }\n`;
+css += `.bg-secondary { background-color: #facc15; }\n`;
+
+/* Extract Arbitrary Classes */
+const content = inputFiles
+  .map(file => fs.existsSync(file) ? fs.readFileSync(file, "utf8") : "")
+  .join(" ");
+
+const matches = [...content.matchAll(/(\w+)-\[(.+?)\]/g)];
+
+matches.forEach(([full, prop, val]) => {
+  const safeVal = val.replace(/\./g, "\\.").replace(/\//g, "\\/");
+  const selector = `${prop}-\\[${safeVal}\\]`;
+
+  if (prop.startsWith("p")) {
+    css += `.${selector} { padding: ${val}; }\n`;
+  } else if (prop.startsWith("m")) {
+    css += `.${selector} { margin: ${val}; }\n`;
+  } else if (prop === "text") {
+    css += `.${selector} { font-size: ${val}; }\n`;
+  } else if (prop === "rounded") {
+    css += `.${selector} { border-radius: ${val}; }\n`;
+  }
+});
+fs.writeFileSync("styles/striveui.css", css);
+
+console.log("✅ Generated striveui.css with dynamic [value] class support.");

package/app/index.tsx

@@ -1,2 +1,25 @@
-import Button from './component/Button';
-export { Button };
+import { Button, Input, Anchor, TextArea, Select } from "./component/blocks";
+import {
+  Card,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableDataCell,
+} from "./component/ui";
+
+export {
+  Button,
+  Input,
+  Anchor,
+  TextArea,
+  Select,
+  Card,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableDataCell,
+};

package/app/styles/_colors.scss

@@ -0,0 +1,161 @@
+$colors: (
+    blue: (50: #eff6ff,
+        100: #dbeafe,
+        200: #bfdbfe,
+        300: #93c5fd,
+        400: #60a5fa,
+        500: #3b82f6,
+        600: #2563eb,
+        700: #1d4ed8,
+        800: #1e40af,
+        900: #1e3a8a),
+    red: (50: #fef2f2,
+        100: #fee2e2,
+        200: #fecaca,
+        300: #fca5a5,
+        400: #f87171,
+        500: #ef4444,
+        600: #dc2626,
+        700: #b91c1c,
+        800: #991b1b,
+        900: #7f1d1d),
+     green: (50: #f0fdf4,
+        100: #dcfce7,
+        200: #bbf7d0,
+        300: #86efac,
+        400: #4ade80,
+        500: #22c55e,
+        600: #16a34a,
+        700: #15803d,
+        800: #166534,
+        900: #14532d),
+    yellow: (50: #fefce8,
+        100: #fef9c3,
+        200: #fef08a,
+        300: #fde047,
+        400: #facc15,
+        500: #eab308,
+        600: #ca8a04,
+        700: #a16207,
+        800: #854d0e,
+        900: #713f12),
+    orange: (50: #fff7ed,
+        100: #ffedd5,
+        200: #fed7aa,
+        300: #fdba74,
+        400: #fb923c,
+        500: #f97316,
+        600: #ea580c,
+        700: #c2410c,
+        800: #9a3412,
+        900: #7c2d12,
+    ),
+    purple: (50: #faf5ff,
+        100: #f3e8ff,
+        200: #e9d5ff,
+        300: #d8b4fe,
+        400: #c084fc,
+        500: #a855f7,
+        600: #9333ea,
+        700: #7e22ce,
+        800: #6b21a8,
+        900: #581c87),
+    pink: (50: #fdf2f8,
+        100: #fce7f3,
+        200: #fbcfe8,
+        300: #f9a8d4,
+        400: #f472b6,
+        500: #ec4899,
+        600: #db2777,
+        700: #be185d,
+        800: #9d174d,
+        900: #831843),
+    indigo: (50: #eef2ff,
+        100: #e0e7ff,
+        200: #c7d2fe,
+        300: #a5b4fc,
+        400: #818cf8,
+        500: #6366f1,
+        600: #4f46e5,
+        700: #4338ca,
+        800: #3730a3,
+        900: #312e81),
+    cyan: (50: #ecfeff,
+        100: #cffafe,
+        200: #a5f3fc,
+        300: #67e8f9,
+        400: #22d3ee,
+        500: #06b6d4,
+        600: #0891b2,
+        700: #0e7490,
+        800: #155e75,
+        900: #164e63),
+    teal: (50: #f0fdfa,
+        100: #ccfbf1,
+        200: #99f6e4,
+        300: #5eead4,
+        400: #2dd4bf,
+        500: #14b8a6,
+        600: #0d9488,
+        700: #0f766e,
+        800: #115e59,
+        900: #134e4a),
+    gray: (50: #f9fafb,
+        100: #f3f4f6,
+        200: #e5e7eb,
+        300: #d1d5db,
+        400: #9ca3af,
+        500: #6b7280,
+        600: #4b5563,
+        700: #374151,
+        800: #1f2937,
+        900: #111827),
+    amber: (50: #fffbeb,
+        100: #fef3c7,
+        200: #fde68a,
+        300: #fcd34d,
+        400: #fbbf24,
+        500: #f59e0b,
+        600: #d97706,
+        700: #b45309,
+        800: #92400e,
+        900: #78350f),
+    stone: (50: #fafaf9,
+        100: #f5f5f4,
+        200: #e7e5e4,
+        300: #d6d3d1,
+        400: #a8a29e,
+        500: #78716c,
+        600: #57534e,
+        700: #44403c,
+        800: #292524,
+        900: #1c1917),
+    fuchsia: (50: #fdf4ff,
+        100: #fae8ff,
+        200: #f5d0fe,
+        300: #f0abfc,
+        400: #e879f9,
+        500: #d946ef,
+        600: #c026d3,
+        700: #a21caf,
+        800: #86198f,
+        900: #701a75)
+);
+
+@each $color, $shades in $colors {
+  $color-name: " " + $color;
+
+  @each $shade, $hex in $shades {
+    .bg-#{$color-name}-#{$shade} {
+      background-color: #{$hex};
+    }
+
+    .text-#{$color-name}-#{$shade} {
+      color: #{$hex};
+    }
+
+    .border-#{$color-name}-#{$shade} {
+      border-color: #{$hex};
+    }
+  }
+}

package/app/styles/_spacing.scss

@@ -0,0 +1,33 @@
+$spacing: (
+    1: 3rem,
+    2: 6rem,
+    3: 9rem,
+    4: 12rem,
+    5: 15rem
+);
+
+@each $key, $val in $spacing {
+    .p-#{$key} {
+        padding: $val;
+    }
+
+    .m-#{$key} {
+        margin: $val;
+    }
+
+    .mt-#{$key} {
+        margin-top: $val;
+    }
+
+    .mb-#{$key} {
+        margin-bottom: $val;
+    }
+
+    .ml-#{$key} {
+        margin-left: $val;
+    }
+
+    .mr-#{$key} {
+        margin-right: $val;
+    }
+}

package/app/styles/_typography.scss

@@ -0,0 +1,35 @@
+$font-sizes: (
+    xs: 9rem,
+    sm: 10.5rem,
+    base: 12rem,
+    lg: 13.5rem,
+    xl: 15rem,
+    2xl: 18rem,
+    3xl: 22.5rem
+);
+
+@each $label, $size in $font-sizes {
+    .text-#{$label} {
+        font-size: $size;
+    }
+}
+
+.font-normal {
+    font-weight: 400;
+}
+
+.font-bold {
+    font-weight: 700;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}

package/app/styles/striveui.scss

@@ -0,0 +1,169 @@
+@use './colors' as *;
+@use './spacing' as *;
+@use './typography' as *;
+
+$gridColumns: (
+    1: repeat(1, 1fr),
+    2: repeat(2, 1fr),
+    3: repeat(3, 1fr),
+    4: repeat(4, 1fr),
+    5: repeat(5, 1fr),
+    6: repeat(6, 1fr),
+    7: repeat(7, 1fr),
+    8: repeat(8, 1fr),
+    9: repeat(9, 1fr),
+    10: repeat(10, 1fr),
+    11: repeat(11, 1fr),
+    12: repeat(12, 1fr)
+);
+
+.grid {
+    display: grid;
+}
+
+@each $number , $columns in $gridColumns {
+    .grid-cols-#{$number} {
+        grid-template-columns: #{$columns};
+    }
+
+    .col-span-#{$number} {
+        grid-column: span #{$number} / span #{$number};
+    }
+
+    .row-span-#{$number} {
+        grid-row: span #{$number} / span #{$number};
+    }
+}
+
+/* === Grid Alignment === */
+.place-items-start {
+    place-items: start;
+}
+
+.place-items-center {
+    place-items: center;
+}
+
+.place-items-end {
+    place-items: end;
+}
+
+/* === Flex Display === */
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+/* === Flex Direction === */
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+/* === Flex Wrap === */
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.flex-nowrap {
+    flex-wrap: nowrap;
+}
+
+/* === Flex Grow/Shrink === */
+.flex-1 {
+    flex: 1 1 0%;
+}
+
+.flex-grow {
+    flex-grow: 1;
+}
+
+.flex-shrink {
+    flex-shrink: 1;
+}
+
+/* === Flex Basis === */
+.basis-1_2 {
+    flex-basis: 50%;
+}
+
+.basis-1_3 {
+    flex-basis: 33.3333%;
+}
+
+.basis-2_3 {
+    flex-basis: 66.6667%;
+}
+
+.basis-1_4 {
+    flex-basis: 25%;
+}
+
+.basis-3_4 {
+    flex-basis: 75%;
+}
+
+.basis-full {
+    flex-basis: 100%;
+}
+
+/* === Flex Justify === */
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-around {
+    justify-content: space-around;
+}
+
+.justify-evenly {
+    justify-content: space-evenly;
+}
+
+/* === Flex Align Items === */
+.items-start {
+    align-items: flex-start;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.items-end {
+    align-items: flex-end;
+}
+
+.items-stretch {
+    align-items: stretch;
+}
+
+/* === Flex Align Self === */
+.self-start {
+    align-self: flex-start;
+}
+
+.self-center {
+    align-self: center;
+}
+
+.self-end {
+    align-self: flex-end;
+}