@nobak/design-system 1.0.0

package/lib/stories/Foundation/Shadows.stories.js

@@ -0,0 +1,601 @@
+import React from 'react';
+var meta = {
+  title: 'Foundation/Shadows & Depth',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: "\n# Shadows & Depth\n\nCreating professional depth through layered shadows. Each component uses multiple shadows to create ambient depth and visual hierarchy.\n\n**Key Technique:** Combining short, sharp shadows with longer, low-opacity ambient shadows.\n        "
+      }
+    }
+  },
+  tags: ['autodocs']
+};
+export default meta;
+/**
+ * Basic shadow levels from flat to highly elevated.
+ * Each card demonstrates a different elevation level using layered shadows.
+ */
+export var ShadowLevels = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+        gap: '48px',
+        padding: '48px',
+        background: '#F5F5F5'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        padding: '32px',
+        borderRadius: '8px',
+        border: '1px solid #E5E5E5'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '14px',
+        fontWeight: 600
+      }
+    }, "Flat"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, "No shadow, border only")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        padding: '32px',
+        borderRadius: '8px',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '14px',
+        fontWeight: 600
+      }
+    }, "Subtle"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, "Minimal elevation")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        padding: '32px',
+        borderRadius: '8px',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04)'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '14px',
+        fontWeight: 600
+      }
+    }, "Low"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, "Short + ambient shadow")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        padding: '32px',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06)'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '14px',
+        fontWeight: 600
+      }
+    }, "Medium"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, "Balanced elevation")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        padding: '32px',
+        borderRadius: '8px',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.12), 0 16px 24px rgba(0, 0, 0, 0.08)'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '14px',
+        fontWeight: 600
+      }
+    }, "High"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, "Prominent elevation")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        padding: '32px',
+        borderRadius: '8px',
+        boxShadow: '0 8px 12px rgba(0, 0, 0, 0.15), 0 24px 48px rgba(0, 0, 0, 0.1)'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '14px',
+        fontWeight: 600
+      }
+    }, "Highest"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, "Maximum elevation")));
+  }
+};
+
+/**
+ * Cards demonstrating different surface treatments.
+ * Shows how shadows create visual hierarchy.
+ */
+export var CardVariations = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gap: '24px',
+        padding: '24px',
+        background: '#FAFAFA'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        border: '1px solid #E5E5E5',
+        borderRadius: '12px',
+        padding: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '48px',
+        height: '48px',
+        background: '#FF3B2D',
+        borderRadius: '8px',
+        marginBottom: '16px'
+      }
+    }), /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '16px',
+        fontWeight: 700
+      }
+    }, "Flat Surface"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '14px',
+        color: '#666',
+        lineHeight: 1.6
+      }
+    }, "Border only, no shadow. Clean and minimal appearance.")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        borderRadius: '12px',
+        padding: '24px',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04)'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '48px',
+        height: '48px',
+        background: '#FF3B2D',
+        borderRadius: '8px',
+        marginBottom: '16px'
+      }
+    }), /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '16px',
+        fontWeight: 700
+      }
+    }, "Standard Card"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '14px',
+        color: '#666',
+        lineHeight: 1.6
+      }
+    }, "Layered shadows create subtle depth and separation from background.")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        borderRadius: '12px',
+        padding: '24px',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.12), 0 16px 24px rgba(0, 0, 0, 0.08)'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '48px',
+        height: '48px',
+        background: '#FF3B2D',
+        borderRadius: '8px',
+        marginBottom: '16px'
+      }
+    }), /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '16px',
+        fontWeight: 700
+      }
+    }, "Elevated Card"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: '14px',
+        color: '#666',
+        lineHeight: 1.6
+      }
+    }, "Stronger shadows for prominent content that demands attention.")));
+  }
+};
+
+/**
+ * Button states showing how shadows change with interaction.
+ */
+export var ButtonStates = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '32px',
+        padding: '48px',
+        maxWidth: '600px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
+      style: {
+        margin: '0 0 12px 0',
+        fontSize: '14px',
+        color: '#666'
+      }
+    }, "Default"), /*#__PURE__*/React.createElement("button", {
+      style: {
+        background: '#FF3B2D',
+        color: 'white',
+        border: 'none',
+        borderRadius: '8px',
+        padding: '14px 28px',
+        fontSize: '16px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)'
+      }
+    }, "Primary Action")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
+      style: {
+        margin: '0 0 12px 0',
+        fontSize: '14px',
+        color: '#666'
+      }
+    }, "Hover (Enhanced Shadow)"), /*#__PURE__*/React.createElement("button", {
+      style: {
+        background: '#E6251A',
+        color: 'white',
+        border: 'none',
+        borderRadius: '8px',
+        padding: '14px 28px',
+        fontSize: '16px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08)',
+        transform: 'translateY(-1px)'
+      }
+    }, "Primary Action")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
+      style: {
+        margin: '0 0 12px 0',
+        fontSize: '14px',
+        color: '#666'
+      }
+    }, "Active (Reduced Shadow)"), /*#__PURE__*/React.createElement("button", {
+      style: {
+        background: '#CC1A0F',
+        color: 'white',
+        border: 'none',
+        borderRadius: '8px',
+        padding: '14px 28px',
+        fontSize: '16px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.15)',
+        transform: 'translateY(1px)'
+      }
+    }, "Primary Action")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
+      style: {
+        margin: '0 0 12px 0',
+        fontSize: '14px',
+        color: '#666'
+      }
+    }, "Disabled (Minimal Shadow)"), /*#__PURE__*/React.createElement("button", {
+      disabled: true,
+      style: {
+        background: '#E5E5E5',
+        color: '#A3A3A3',
+        border: 'none',
+        borderRadius: '8px',
+        padding: '14px 28px',
+        fontSize: '16px',
+        fontWeight: 600,
+        cursor: 'not-allowed',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
+      }
+    }, "Primary Action")));
+  }
+};
+
+/**
+ * Layered interface showing depth through shadow hierarchy.
+ */
+export var LayeredInterface = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '48px',
+        background: '#F5F5F5',
+        minHeight: '500px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'white',
+        borderRadius: '16px',
+        padding: '32px',
+        maxWidth: '500px',
+        width: '100%',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04)'
+      }
+    }, /*#__PURE__*/React.createElement("h2", {
+      style: {
+        margin: '0 0 24px 0',
+        fontSize: '24px',
+        fontWeight: 700
+      }
+    }, "Account Overview"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        marginBottom: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#FAFAFA',
+        borderRadius: '12px',
+        padding: '20px',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '12px',
+        color: '#666',
+        marginBottom: '4px'
+      }
+    }, "Total Balance"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '28px',
+        fontWeight: 700
+      }
+    }, "$24,586.00")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: '#FAFAFA',
+        borderRadius: '12px',
+        padding: '20px',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '12px',
+        color: '#666',
+        marginBottom: '4px'
+      }
+    }, "Monthly Change"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '20px',
+        fontWeight: 700,
+        color: '#10B981'
+      }
+    }, "+12.5%"))), /*#__PURE__*/React.createElement("button", {
+      style: {
+        background: '#FF3B2D',
+        color: 'white',
+        border: 'none',
+        borderRadius: '10px',
+        padding: '16px',
+        fontSize: '16px',
+        fontWeight: 600,
+        width: '100%',
+        cursor: 'pointer',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08)'
+      }
+    }, "View Details")));
+  }
+};
+
+/**
+ * Modal overlay demonstrating maximum depth.
+ */
+export var ModalDepth = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        padding: '48px',
+        background: '#E5E5E5',
+        minHeight: '600px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '48px',
+        left: '48px',
+        right: '48px',
+        background: 'white',
+        borderRadius: '12px',
+        padding: '32px',
+        opacity: 0.4,
+        filter: 'blur(2px)'
+      }
+    }, /*#__PURE__*/React.createElement("h2", {
+      style: {
+        fontSize: '24px',
+        marginBottom: '16px'
+      }
+    }, "Background Content"), /*#__PURE__*/React.createElement("p", null, "This content is dimmed and blurred to show it's behind the modal.")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        zIndex: 10,
+        background: 'white',
+        borderRadius: '16px',
+        padding: '40px',
+        maxWidth: '450px',
+        width: '100%',
+        boxShadow: '0 8px 16px rgba(0, 0, 0, 0.15), 0 24px 48px rgba(0, 0, 0, 0.12)'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '0 0 16px 0',
+        fontSize: '20px',
+        fontWeight: 700
+      }
+    }, "Confirm Action"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: '0 0 32px 0',
+        fontSize: '14px',
+        color: '#666',
+        lineHeight: 1.6
+      }
+    }, "This modal uses the highest shadow level to appear above all other content. Notice the combination of sharp and ambient shadows."), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      style: {
+        flex: 1,
+        background: 'white',
+        color: '#171717',
+        border: '1px solid #E5E5E5',
+        borderRadius: '8px',
+        padding: '12px',
+        fontSize: '14px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
+      }
+    }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+      style: {
+        flex: 1,
+        background: '#FF3B2D',
+        color: 'white',
+        border: 'none',
+        borderRadius: '8px',
+        padding: '12px',
+        fontSize: '14px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)'
+      }
+    }, "Confirm"))));
+  }
+};
+
+/**
+ * Input fields showing subtle depth.
+ */
+export var InputDepth = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: '500px',
+        margin: '0 auto',
+        padding: '48px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+      style: {
+        display: 'block',
+        fontSize: '14px',
+        fontWeight: 600,
+        marginBottom: '8px',
+        color: '#171717'
+      }
+    }, "Email Address"), /*#__PURE__*/React.createElement("input", {
+      type: "email",
+      placeholder: "you@example.com",
+      style: {
+        width: '100%',
+        padding: '12px 16px',
+        fontSize: '16px',
+        border: '1px solid #E5E5E5',
+        borderRadius: '8px',
+        boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.04)',
+        outline: 'none'
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+      style: {
+        display: 'block',
+        fontSize: '14px',
+        fontWeight: 600,
+        marginBottom: '8px',
+        color: '#171717'
+      }
+    }, "Password (Focused State)"), /*#__PURE__*/React.createElement("input", {
+      type: "password",
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      style: {
+        width: '100%',
+        padding: '12px 16px',
+        fontSize: '16px',
+        border: '2px solid #FF3B2D',
+        borderRadius: '8px',
+        boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(255, 59, 45, 0.1)',
+        outline: 'none'
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+      style: {
+        display: 'block',
+        fontSize: '14px',
+        fontWeight: '600',
+        marginBottom: '8px',
+        color: '#171717'
+      }
+    }, "Message"), /*#__PURE__*/React.createElement("textarea", {
+      placeholder: "Enter your message...",
+      rows: 4,
+      style: {
+        width: '100%',
+        padding: '12px 16px',
+        fontSize: '16px',
+        border: '1px solid #E5E5E5',
+        borderRadius: '8px',
+        boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, 0.05)',
+        outline: 'none',
+        fontFamily: 'inherit',
+        resize: 'vertical'
+      }
+    })));
+  }
+};

package/lib/stories/Foundation/Symbol.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Symbol as _Symbol } from "../../components/Symbol";
+export default {
+  title: 'Foundation / Symbol',
+  component: _Symbol,
+  argTypes: {
+    // Define controls for your props here
+  }
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_Symbol, {
+    type: "Star"
+  });
+};
+export var Default = Template.bind({});
+Default.args = {
+  // Props for the default story
+};

package/lib/stories/HeroContainer.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { RisingSun, HeroContainer } from "../components";
+import "../../styles/index.css";
+export default {
+  component: HeroContainer,
+  title: 'Patterns / HeroContainer'
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(HeroContainer, null, /*#__PURE__*/React.createElement(RisingSun, {
+    roundedClass: "rounded-[48px]"
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};